im having a little problem with the Google API maps, i was wondering if anyone could help. I am trying to get infowindows to open with some HTML in containing a HREF. Now i could use the “X” to close the window however id prefer a second method of a Javascript timer to close the info windows as shown below..
setTimeout(‘infowindow.close(map,marker)’,’2000′);
The browser however reports that info window does not exist after the 2 seconds expire. To fix the problem i attempted to add infowindow object and marker objects to an array in global scope, however this did not resolve the issue..
I’ve returned the code to its original state would would be grateful for any advise on the issue..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var markers = [];
var info = [];
var i = 0;
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.768505, -111.853244);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addPostCode('bb9 5pl','HTML');
addPostCode('bb9 7de','HTML');
addPostCode('bb12 7nq','HTML');
addPostCode('bb4 6be','HTML');
}
function addPostCode(zip, html)
{
geocoder.geocode(
{
'address': zip
}, function (results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location,
name: zip
});
var infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(marker, 'mouseover', function()
{
infowindow.open(map,marker);
setTimeout('infowindow.close(map,marker)','2000');
});
i++;
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function checkZip(zip)
{
var distance = Number.MAX_VALUE;
var index = 0;
geocoder.geocode(
{
'address': zip
}, function (results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
for (ix = 0; ix < markers.length; ix++)
{
var tmp = getDistance(results[0].geometry.location, markers[ix].position);
if (tmp < distance)
{
distance = tmp;
index = ix;
}
}
alert('nearest zipcode is :' + markers[index].name + ' Distance:' + distance)
}
});
}
function getDistance(latlng1, latlng2)
{
var R = 6371; // Radius of the earth in km
var dLat = (latlng2.lat() - latlng1.lat()) * Math.PI / 180; // Javascript functions in radians
var dLon = (latlng2.lng() - latlng1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(latlng1.lat() * Math.PI / 180)
* Math.cos(latlng2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c; // Distance in km
d = d * 0.621371192;
return d;
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Geocode" onclick="checkZip(getElementById('address').value)">
</div>
<div id="map_canvas" style="height:500px; width: 600px;"></div>
</body>
</html>
infowindowin your setTimeout call is out of scope when it triggers. Change that call to the following to correct this using Closures: