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>
