Trigger event with infoWindow or InfoBox on click Google Map API V3
I want to know how to trigger an event when I click on an infoWindow using Google Maps API v3. In this example, when I click on a marker, an info window shows up with a unique message, based on which marker I clicked. I want to also be able to click the info window and have an alert show up that says
"You clicked on the infowindow for (__fill in blank location_)
I found some examples using Google Maps API v2 and jQuery, but not with just plain old Google Maps API v3.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
google.maps.event.addListener(infowindow, 'click', (function(i){
alert("You clicked on the infowindow for" + cityList[i][0]);
}));
}
})(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
Update I ended up figuring this out for InfoBox as well, which is included below in my answer.
Ok I figured this out for infoWindow, but then I also figured it out for InfoBox since it is prettier and more customizable. I'm new to JavaScript and these closures can be very tricky.
For infoWindow
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
var boxText1 = document.createElement("div");
boxText1.id = "boxText1";
boxText1.className = "labelText1";
boxText1.innerHTML = "title1";//this is created earlier
var boxList = [];
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true
,isHidden:false
,pixelOffset: new google.maps.Size(-10, -10)
,closeBoxURL: ""
,pane: "mapPane"
,enableEventPropagation: true
});
for (var i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
id: i,
title: cityList[i][0]
});
var boxText = document.createElement("div");
boxText.id = i;
boxText.className = "labelText" + i;
boxText.innerHTML = cityList[i][0];
boxList.push(boxText);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(boxList[this.id]);
infowindow.open(map, marker);
}
})(marker, i)); //end add marker listener
google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
return function() {
alert('clicked ' + cityList[i][0])
}
})(marker, i));
} //endfor
}//end function
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
For InfoBox
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript"
src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"> </script>
<script type="text/javascript"
src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var boxList =[];
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers(){
for (var i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
id: i,
title: cityList[i][0]
});
var boxText = document.createElement("div");
boxText.id = i;
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "InfoBox for " + cityList[i][0];
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
boxList.push(ib);
google.maps.event.addListener(marker,'click',(function(marker, i) {
return function() {
boxList[i].open(map, this);
}
})(marker, i));
google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) {
return function() {
alert('clicked ' + cityList[i][0])
}
})(marker, i));
} //endfor
} //end function
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
The InfoWindow object does not have a 'click' event, so you cannot do
google.maps.event.addListener(infowindow, 'click',....
instead, you can attach an event handler to the DOM object, such as
function addMarker(latLng, name){
var marker = new google.maps.Marker({
map:map,
position:latLng
});
G.event.addListener(marker,'click',function(mev){
var div = document.createElement('div');
div.innerHTML = name;
div.onclick = function(){iwClick(name)};
infoWindow.setContent(div);
infoWindow.setPosition(mev.latLng);
infoWindow.open(map);
});
}
function iwClick(str){
alert(str);
};
and you call it with
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
addMarker(chicago,'chicago');
Inorder to make an infowindow clickable or you want fire a function on click of any tags inside the infowindow, the dom has to be ready. So when the dom is ready you can call a function.
google.maps.event.addListener(infowindow, 'domready', function() {
document.getElementById('yourId').addEventListener("click", yourFucntionToCall);
function yourFucntionToCall() {
Your fucntion code......
}
});Thanx! Erin is tha man! You fixed my problem! I was bashing it for 4 days now! Closures are a pain in the * if you are new to them.
Here's is my working code (Sencha Touch 2 and Google maps API v3). It will oly allow one infowindow to be open.
var openedInfoWindow = null;
var boxList = [];
var marker, i;
//build info box object
var infoWindow = new google.maps.InfoWindow({
enableEventPropagation: true,
});
//handle close
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
//loop trough store data...
for(i in data) {
//data
var itemData = data[i].getData();
//marker
var geopos = new google.maps.LatLng(itemData['lat'], itemData['lng']);
var marker = new google.maps.Marker({
position: geopos,
//icon: image,
map: map,
title: itemData['title'],
id: i,
animation: google.maps.Animation.DROP
});
//add info window content to DOM
var boxText = document.createElement("div");
boxText.id = i;
boxText.className = "labelText" + i;
boxText.data = itemData;
boxText.innerHTML = '<b>' + itemData['title'] + '</b>' + (itemData['distance'] ? ' (' + itemData['distance'] + ')' : '') + '<br />' + (itemData['address'] != itemData['title'] ? itemData['address'] : '') + (itemData['price'] ? '<br />' + itemData['price'] : '') + '<br /><a class="button">Meer info</a>';
boxList.push(boxText);
//add marker click event
google.maps.event.addListener(marker, 'click', (function(marker, i) {
if (openedInfoWindow != null)
openedInfoWindow.close();
return function() {
infoWindow.setContent(boxList[this.id]);
infoWindow.open(map, marker);
openedInfoWindow = infoWindow;
}
})(marker, i));
//when infowindow is clicked, open view...
google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
return function(){
iStuddy.app.pushView('kames_detail',boxList[i].data);
}
})(marker, i));
}