使用Google Maps API在信息窗口中添加Google图表

Question

使用Google Maps API在信息窗口中添加Google图表

google-mapsgoogle-maps-api-3popupgoogle-visualizationinfowindow

11

我看到许多其他人有同样的问题，但找不到答案。我使用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

我尝试了许多不同的方法，其中最明显的方法是在InfoWindow的setContent属性中添加容器()，然后调用创建图表的外部函数。但是这种方式似乎行不通，因为该函数无法看到容器。我还尝试将整个图表的代码嵌入setContent属性中，就像在此帖子中建议的那样:

using google chart tools in a google maps api infowindow content string

我成功执行了代码，但是没有显示任何内容。另一种方法是在另一个HTML页面中创建图表，然后以某种方式将此页面设置为setContent属性，但也没有成功。

我快要放弃了，因为我找不到解决方法。

如果有人能提供帮助，我将不胜感激。

谢谢。

Jose

- Jose Bagatelli

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr.Molle · Accepted Answer

这似乎无法工作，因为该函数无法看到容器。

你可以将容器作为参数传递给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/