I am trying to get infowindow for multiple addresses. Its creating
markers but when I click on
markers, infowindow is not popping up. Please help and see what could be wrong in this code. Rest all info is fine only issue is with infowindow not coming up.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google
Maps Multiple Markers</title>
<script src="http://maps.
google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="height: 800px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
];
var map = new
google.
maps.Map(document.getElementById('map'), {
zoom: 10,
center: new
google.
maps.LatLng(43.253205,-80.480347),
mapTypeId:
google.
maps.MapTypeId.ROADMAP
});
var infowindow = new
google.
maps.InfoWindow();
var geocoder = new
google.
maps.Geocoder();
var marker, i;
for (i = 0; i < locations.length; i++) {
geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
//alert(status);
if (status ==
google.
maps.GeocoderStatus.OK) {
//alert(results[0].geometry.location);
map.setCenter(results[0].geometry.location);
marker = new
google.
maps.Marker({
position: results[0].geometry.location,
map: map
});
google.
maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);});
google.
maps.event.addListener(marker, 'mouseout', function() { infowindow.close();});
}
else
{
alert("some problem in geocode" + status);
}
});
}
</script>
</body>
</html>
