在infowindow谷歌地图中调用JavaScript [英] calling javascript in infowindow google map
本文介绍了在infowindow谷歌地图中调用JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在google map infoWindow（）中调用javascript。我知道这是一个经典问题。我已经阅读了很多类似的问题，但我找不到解决方案:(
我的代码：
< pre< code><！DOCTYPE>
< html>
< head>
< link rel =stylesheettype =text / css href =http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css/>
< script type =text / javascriptsrc =http：// visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js\"></script>
< script type =text / javascriptsrc =http://www.google。 com / jsapi>< / script>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title> ; Rectangle Overlay< / title>
< style type =text / css>
#map {
width：1200px;
height：700px;
}
< / style>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< ; / script>
< script type =text / javascript>
function i nit（）{
var myOptions = {
center：new google.maps.LatLng（38.122404,23.862591），
zoom：3，
mapTypeId：google.maps.MapTypeId。 ROADMAP
};
var map = new google.maps.Map（document.getElementById（'map'），myOptions）;
var locations = [
['Bondi Beach'，38.6391,23.3437]，
[< scr+ipt type = 'text / javascript'> alert（'test'）;< / scr+ipt>，37.893,23.936999999999998]
];
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
}
google.maps.event.addDomListener（window，'load'，init）;
< / script>
< / head>
< body>
< h1>服务< / h1>
< h2>地图< h2>
< div id =map>< / div>
< / script>
< / td>< / tr>< / table> < div id =chart_divstyle =width：1800px; height：1100px;>< / div> < /体>
< / html>
任何人都知道如何解决这个问题？
<
$ b
编辑：
p> 乔纳斯格鲁曼的答案是正确的。
事实上，我需要运行的JavaScript是在infowindow中调用TermCloud（）函数来构建一个云字。我尝试下面的代码。请任何想法???
<！DOCTYPE>
< html>
< head>
< link rel =stylesheettype =text / csshref =http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css/>
< script type =text / javascriptsrc =http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js>< / script>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title> Rectangle Overlay< / title>
< style type =text / css>
#map {
width：1200px;
height：700px;
}
< / style>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
函数init（）{
var myOptions = {
center：new google.maps.LatLng（38.122404,23.862591），
zoom：3，
mapTypeId：google .maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（'map'），myOptions）;
var locations = [
['Bondi Beach'，38.6391,23.3437]，
[Hello，37.893，23.936999999999998]
];
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
//infowindow.setContent(locations [b] b $ infowindow.open（map，marker）;
var yourFunction = new YourFunction（locations [i] [0]）
}
}）（marker，i））;
$ b var YourFunction = function（str）{
this.init = function（）{
google.load（可视化，1）;
google.setOnLoadCallback（draw）;
}
this.init（）;
function draw（）{
data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Label'）;
data.addColumn（'number'，'Value'）;
data.addColumn（'string'，'Link'）;
data.addRows（3）;
data.setValue（0，0，'First Term'）;
data.setValue（0，1，10）;
data.setValue（1，0，'Second'）;
data.setValue（1，1，30）;
data.setValue（1，2，'http://www.google.com'）;
data.setValue（2，0，'Third'）;
data.setValue（2，1，20）;
var outputDiv = document.getElementById（'tcdiv'）;
var tc = new TermCloud（outputDiv）;
tc.draw（data，null）;
}
}
google.maps.event.addDomListener（window，'load '， 在里面）;
< / script>
< / head>
< body>
< h1>服务< / h1>
< h2>地图< h2>
< div id =map>< / div>
< / script>
< / td>< / tr>< / table> < div id =chart_divstyle =width：1800px; height：1100px;>< / div> < /体>
< / html>
解决方案
找到解决方案 - 将infoWindow内容封装在div并在'domready'事件中为该div的id添加一个监听器（请参阅 SO线程）：
var infowindow = new google.maps.InfoWindow（{
content ：'< div id =myInfoWinDiv>'+ myContent +'< / div>'
}）;
google.maps.event.addListener（infowindow，'domready'，function（）{
$（'＃myInfoWinDiv'）。click（function（）{
//做你的事
}）;
}）;
在我的示例中，点击处理程序使用jQuery附加到div。您可以将任何JS放入domready事件处理程序中。它需要在infoWindow的domready中完成，否则你不能确定该对象已经创建。
I am trying to call javascript inside google map infoWindow(). I know it's a classic question. I have read a lot of similar question in stackoverflow butI I can't find solution :(
my code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
['Bondi Beach', 38.6391,23.3437],
["<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>", 37.893, 23.936999999999998]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
anyone know how to solved this issue?
Thank you!
EDIT:
The answer of Jonas Grumannis correct. In fact the javascript that I need to run is to build a cloudword inside infowindow calling TermCloud() function . I try below code. Any idea please???
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
['Bondi Beach', 38.6391,23.3437],
["Hello", 37.893, 23.936999999999998]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
var yourFunction = new YourFunction(locations[i][0])
}
})(marker, i));
}
var YourFunction = function(str) {
this.init = function() {
google.load("visualization", "1");
google.setOnLoadCallback(draw);
}
this.init();
}
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'First Term');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'Second');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'Third');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
解决方案
Found a solution -- wrap the infoWindow content in a div and add a listener in the 'domready' event for that div's id (see this SO thread):
var infowindow = new google.maps.InfoWindow({
content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
$('#myInfoWinDiv').click(function() {
//Do your thing
});
});
In my example, a click handler is attached to the div using jQuery. You can put any JS in the domready event handler. It needs to be done in the infoWindow's domready, otherwise you can't be certain that the object has been created.
这篇关于在infowindow谷歌地图中调用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
