Question

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 geocode the UK Postcode, draw a circle around the result but I cannot get my head around why my closure function isn’t working.

As I understand it the closure principle is about accessing variable from outside the scope of the loop which I am trying to accomplish with the function – but for the life of me I cannot get it to work.

I’m sure someone will have the answer to my glaring error and I would appreciate any help anyone can offer.

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

downloadUrl("getXML.php", function(data) {

    var xml = data.responseXML;
    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");

        geocoder.geocode({
            'address' : postcode
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map : map,
                    clickable : true,
                    position : results[0].geometry.location
                })
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(name );
                        infowindow.open(map, marker);
                    }
                })(marker, i));

                var circle = new google.maps.Circle({
                    map : map,
                    radius : 12070.99, // 15 miles in metres
                    fillColor : '#AA0000'
                });
                circle.bindTo('center', marker, 'position');

            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }

        });

    }

});

Answer 1

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);

    }

});