I know this is a common problem but I have stared, read googled and stared some more but I cannot see what is wrong.
I populate my maps from a MySql Table, reverse geoco
I use function closure with functions for the marker (createMarker) and the geocoder (geocodeMarker)
var mapOptions = {
zoom : 8,
center : new google.maps.LatLng(37.09024, -95.712891),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var infowindow = new google.maps.InfoWindow({
content : contentString
});
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString;
var i;
function createMarker(latlng, name, html)
{
var marker = new google.maps.Marker({
map : map,
clickable : true,
position : latlng
})
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(name );
infowindow.open(map, marker);
});
var circle = new google.maps.Circle({
map : map,
radius : 12070.99, // 15 miles in metres
fillColor : '#AA0000'
});
circle.bindTo('center', marker, 'position');
}
function geocodeMarker(postcode, name, html)
{
geocoder.geocode({
'address' : postcode
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, html);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
downloadUrl("getXML.php", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
contentString =(name);
var postcode = markers[i].getAttribute("postcode");
var dateadded = markers[i].getAttribute("dateadded");
var extra = markers[i].getAttribute("extra");
geocodeMarker(postcode, name, contentString);
}
});