Добавьте диаграмму google в infowindow, используя карты google api

Я видел много других людей с тем же вопросом, но не смог найти ответа. У меня есть простая карта, которую я построил с помощью Google Maps Javascript api v3. На карте есть несколько маркеров, которые связаны с инфоиндустом, чтобы отображать конкретную информацию для каждого маркера. Я хочу добавить диаграмму google в infowindow, но просто не мог понять, как это сделать. Я просмотрел все сообщения, которые мог найти (здесь и на других форумах), и я заметил, что другие люди пытаются что-то сделать, но, похоже, нет конкретного ответа. Я заметил, что люди успешно делают такую ​​вещь, используя таблицы слияния, но это не мой случай, поскольку я загружаю данные из таблицы MySQL. На данный момент у меня есть простая карта, код которой показан ниже:

  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(-33.837342,151.208954),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    var data = [
      ['Bondi Beach', -33.891044,151.275537],
      ['Cronulla Beach', -34.046544,151.159601],
    ];

    var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537);
    var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601);

    var marker1 = new google.maps.Marker({
        position: myLatLng1,
        map: map
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    google.maps.event.addListener(marker1, 'click', function() {
      var infowindow1 = new google.maps.InfoWindow();
      infowindow1.setContent('Display the chart here');
      infowindow1.open(map, marker1);
    });

    google.maps.event.addListener(marker2, 'click', function() {
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent('Display the chart here');
      infowindow2.open(map, marker1);
      infowindow2.setContent('Display the chart here');
      infowindow2.open(map, marker2);
    });          
  }

и вот код для простой диаграммы, например:

https://google-developers.appspot.com/chart/interactive/docs/quick_start

Я пробовал много разных подходов, и мне кажется более очевидным добавить контейнер() в свойство setContent InfoWindow, а затем вызвать внешнюю функцию, которая создает диаграмму. Кажется, что это не работает, поскольку функция не может видеть контейнер. Я также попытался встроить весь код для диаграммы в свойство setContent, как предлагается в этом сообщении:

используя инструменты диаграммы google в строке содержимого google maps api infowindow

Мне удалось выполнить код без ошибок, однако ничего не отображается. Такой подход мог бы создать диаграмму на другой странице html и каким-то образом установить эту страницу в свойство setContent, а также не добиться успеха.

Я собираюсь сдаться, поскольку я не вижу способа сделать это.

Буду признателен за любую помощь.

Спасибо

Jose

Ответы

Ответ 1

Это не работает, поскольку функция не может видеть контейнер.

Вы можете передать контейнер в качестве аргумента drawChart()

Но я думаю, вам нравится рисовать диаграмму, заполненную данными, связанными с маркером, поэтому я бы предложил передать маркер в качестве аргумента drawChart() и создать там infoWindow.

Пример-код (без использования данных, связанных с маркером, поскольку не ясно, какие данные вы хотите нарисовать)

       function drawChart(marker) {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'Pizza sold @ '+
                           marker.getPosition().toString(),
                   'width':300,
                   'height':200};

    var node        = document.createElement('div'),
        infoWindow  = new google.maps.InfoWindow(),
        chart       = new google.visualization.PieChart(node);

        chart.draw(data, options);
        infoWindow.setContent(node);
        infoWindow.open(marker.getMap(),marker);
  }

использование:

google.maps.event.addListener(marker1, 'click', function() {
  drawChart(this);
});

Демо: http://jsfiddle.net/doktormolle/S6vBK/