Добавьте несколько диаграмм в информационное окно Google Maps

Я действительно изо всех сил пытался добавить диаграмму Google в информационное окно карт Google. Итак, я нашел действительно ценную помощь от доктора Молле (еще раз спасибо, приятель) в сообщении ниже.

Добавить диаграмму Google в информационное окно с помощью карт Google. API

Теперь мне трудно добавить более одной диаграммы в информационное окно. Мне удалось сделать это, объединив каждый контейнер через его innerHTML, и он работает нормально, за исключением того факта, что диаграмма теряет свою функциональность (не может использовать параметр наведения мыши).

Это код, который я придумал для добавления с помощью innerHTML, и я хотел бы знать, есть ли способ сохранить функциональность диаграмм.

   function drawChart(marker,map) {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Orange', 80],
      ['Apple', 55],
      ['Watermelon', 68]
    ]);

    var options = {
      width: 300, height: 150,
      redFrom: 0, redTo: 25,
      yellowFrom:26, yellowTo: 50,
      greenFrom:51, greenTo: 100,
      minorTicks: 5
    };


    var nodeGauge   = document.createElement('chart_div'),
        infoWindow  = new google.maps.InfoWindow(),
        nodeCol    = document.createElement('col_div');
        chart      = new google.visualization.Gauge(nodeGauge);
        colChart   =  new google.visualization.ColumnChart(nodeCol);


        colChart.draw(data,{});
        chart.draw(data, options);

        infoWindow.setContent(nodeGauge.innerHTML + nodeTab.innerHTML);
        infoWindow.open(map,marker);
  }

google-maps google-visualization infowindow
person Jose Bagatelli    schedule 05.02.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вы можете создать <div> для каждой диаграммы, добавить их к другому тегу div и установить это как содержимое InfoWindow.

var nodeGauge   = document.createElement('div'),
    infoWindow  = new google.maps.InfoWindow(),
    nodeCol    = document.createElement('div'),
    parentDiv  = document.createElement('div');
    chart      = new google.visualization.Gauge(nodeGauge);
    colChart   =  new google.visualization.ColumnChart(nodeCol);

parentDiv.appendChild(nodeGauge);
parentDiv.appendChild(nodeCol);

colChart.draw(data,{});
chart.draw(data, options);

infoWindow.setContent(parentDiv);
infoWindow.open(map,marker);
person Jeff-Meadows    schedule 05.02.2013
comment
Привет, Джефф, большое спасибо за помощь, приятель! Это работает отлично. Именно так, как я искал. Очень ценю вашу помощь и усилия. - person Jose Bagatelli; 06.02.2013