Google Maps Marker Listener issue

Question

I'm having problem with Google Maps API v3 and getting my listener to provide back the result.

I've added a jsFiddle here http://jsfiddle.net/f2DqW/4/

Can anyone tell me what I'm doing wrong?

When you click a marker, I want it to take my postcode from addresses (which will soon be more information) and echo on screen. Eventually I want a popup, but that's not important right now.

My code is:

var geocoder; 
var map; 
function codeAddress() { 

var address = 'SW3, United Kingdom';
geocoder.geocode( { 'address': address}, 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 
    }); 

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

function initialize() { 


 $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=SW3, United Kingdom', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            $('#latId').val(p.lat);
            $('#latId2').val(p.lng);
        });

 var lat = $('#latId').val();
 var lng = $('#latId2').val();


 var map;
    var elevator;
    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(lat,lng),
        mapTypeId: 'terrain'
    };

    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['SW3', 'SW2', 'SW1']; 

    for (var x = 0; x < addresses.length; x++) {


        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'test'
            });



google.maps.event.addListener(marker, 'click', function() {
    alert(addresses[x]);
        map.setCenter(marker.getPosition());

  });

  marker.setMap(map);



        });
    }
 }

Many thanks in advance.

Answer 1

This is a classic: the variable x doesn't hold the value you're expecting when the marker is clicked. It holds addresses.length instead. I would do something like that:

        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, (function(address) { return function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'test'
            });



google.maps.event.addListener(marker, 'click', function() {
    alert(address);
        map.setCenter(marker.getPosition());

  });

  marker.setMap(map);



        };})(addresses[x]));

Answer 2

• demo: http://jsfiddle.net/XcK28/

     for (var x = 0; x < addresses.length; x++) {

         $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {

             var p = data.results[0].geometry.location
             var latlng = new google.maps.LatLng(p.lat, p.lng);

             var marker = new google.maps.Marker({
                 position: latlng,
                 map: map,
                 title: 'test'
             });

             google.maps.event.addListener(marker, 'click', function () {
                 geocoder.geocode({
                     'latLng': latlng
                 }, function (results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                         $.each(results[0].address_components, function (i, item) {
                             if (item.types[0] == 'postal_code') {
                                 alert(item.long_name);
                             }
                         });
                     }
                 });
                 map.setCenter(marker.getPosition());
             });

             marker.setMap(map);
         });
     }
 }