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

Я видел много других людей с тем же вопросом, но не мог найти ответ. У меня есть простая карта, которую я построил с помощью Google Maps Javascript api v3. На карте есть несколько маркеров, которые связаны с информационным окном для отображения конкретной информации для каждого маркера. Я хочу добавить диаграмму Google в информационное окно, но просто не могу понять, как это сделать. Я просмотрел все сообщения, которые смог найти (здесь и на других форумах), и я заметил, что другие люди пытаются сделать что-то подобное, но, похоже, конкретного ответа нет. Я заметил, что люди успешно делают такие вещи, используя таблицы слияния, но это не мой случай, поскольку я загружаю данные из таблицы 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 строка содержимого информационного окна API

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

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

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

Спасибо

Хосе


google-maps google-maps-api-3 google-visualization popup infowindow
person Jose Bagatelli    schedule 03.02.2013    source источник

Ответы (1)


arrow_upward
14
arrow_downward

Похоже, это не работает, так как функция не видит контейнер.

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

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

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

       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/

person Dr.Molle    schedule 03.02.2013
comment
Быстрый вопрос: как вывести два графика в информационное окно? - person Luv; 25.11.2020