Menu
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>
409
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.
Show activity on this post. The following example shows a simple Marker (standard icon) on Google maps for the location and when clicking the icon, it opens the info window.
event. addListener(marker, 'click', function() { infowindow. setContent('<p>Event Name: '+this. title+'</p>' + '<p>Event Type: '+this.
An InfoWindow can be placed on a map at a particular position or above a marker, depending on what is specified in the options. Unless auto-pan is disabled, an InfoWindow will pan the map to make itself visible when it is opened. After constructing an InfoWindow, you must call open to display it on the map.
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
