使用谷歌地图api将谷歌图表添加到infowindow [英] Add a google chart to a infowindow using google maps api
问题描述
我见过很多其他人都有同样的问题，但找不到答案。
我使用Google Maps Javascript api v3构建了一张简单的地图。
地图有几个标记链接到infowindow，以显示每个标记的特定信息。
我想将一个谷歌图表添加到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（ '在这里显示图表'）;
infowindow1.open（map，marker1）;
}）;
google.maps.event.addListener（marker2，'click'，function（）{
var infowindow2 = new google.maps.InfoWindow（）;
infowindow2.setContent（ '显示图表'）;
infowindow2.open（map，marker1）;
infowindow2.setContent（'显示图表'）;
infowindow2.open（map，marker2）;
}）;
}
以下是一个简单图表的代码：
https：// google-developers .appspot.com / chart / interactive / docs / quick_start
我尝试了很多不同的方法，对我来说更加明显的是添加InfoWindow的setContent属性内的container（），然后调用创建图表的外部函数。由于该功能无法看到容器，因此似乎不起作用。
我也试着将这个图表的整个代码嵌入到setContent属性中，正如这篇文章中的建议： /stackoverflow.com/questions/9523465/using-google-chart-tools-in-a-google-maps-api-infowindow-content-string\">使用谷歌地图工具在谷歌地图API infowindow内容字符串
我设法执行了没有错误的代码，但没有显示任何内容。
另一种方法是在另一个html页面中创建图表，并以某种方式将此页面设置为setContent属性，也没有取得成功。
我即将放弃，因为我不能看到这样做。
我很感激任何帮助。
谢谢
何塞
This doens't似乎工作，因为该功能无法看到容器。
您可以将容器作为参数传递给 drawChart（）
但是我想你想绘制填充与标记相关数据的图表，所以我建议将标记作为参数传递给drawChart （），并在那里创建infoWindow。
示例代码（没有实现与标记相关的数据，因为它不清楚你想要绘制什么样的数据） p>
函数drawChart（marker）{
//创建数据表。
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Topping'）;
data.addColumn（'number'，'Slices'）;
data.addRows（[
['Mushrooms'，3]，
['Onions'，1]，
['Olives'，1]，
[ '西葫芦'，1]，
['Pepperoni'，2]
]）;
//设置图表选项
var options = {'title'：'Pizza sold @'+
marker.getPosition（）。toString（），
'宽度'：300，
'高度'：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/
I've seen many other people with the same question but couldn't find a answer. I have a simple map I built using the Google Maps Javascript api v3. The map has a few markers which are linked to an infowindow to display specific information for each marker. I want to add a google chart to the infowindow but just couldn't figure out how to do it. I went through every single post I could find (here and in other forums) and I've noticed other people trying to do something similar but seems that there's no specific answer. I've noticed people are successful doing such thing using fusion tables, but this is not my case as I which to load the data from a MySQL table. For now I have a simple map which the code is shown below:
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);
});
}
and here is the code for a simple chart for example:
https://google-developers.appspot.com/chart/interactive/docs/quick_start
I've tried many different approaches and the one the seems more obvious to me was to add a container () within the setContent property of the InfoWindow and then call an external function which creates the chart. This doens't seems to work as the function can't see the container. I've also tried to embed the entire code for the chart in the setContent property as suggested on this post:
using google chart tools in a google maps api infowindow content string
I've managed to execute the code with no errors, however nothing is shown. Anotther approach would be create the chart in another html page and somehow set this page to the setContent property, also no success achieved.
I'm about to give up as I can't see a way of doing this.
I'd appreciate any help.
Thanks
Jose
This doens't seems to work as the function can't see the container.
You may pass the container as argument to drawChart()
But I guess you like to draw the chart populated with data related to the marker , so I would suggest to pass the marker as argument to drawChart() and create the infoWindow there.
Sample-code(without implementaion of marker-related data, as it's not clear what kind of data you like to draw)
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);
}
usage:
google.maps.event.addListener(marker1, 'click', function() {
drawChart(this);
});
Demo: http://jsfiddle.net/doktormolle/S6vBK/
这篇关于使用谷歌地图api将谷歌图表添加到infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
