markers with titles from object, always repeated the title

Question

I have an object with location and description, the markers are well marked on the map but the title is always "gato". I tried several things like clousers, but it doesnt work or I havent used correctly. Nested for loop that cycles the object and it does get the location but not the description, which one is the all the time.Can anyone help me?This is my code:

/*OBJECT */

  var addresses1 = {
            "address_1": {
                "location": "Avenida de burgos, 9, madrid",
                "description": "gallina"
            },
            "address_2": {
                "location": "castellana, 169, madrid",
                "description": "pollo"
            },
            "address_3": {
                "location": "bilbao, 5, madrid",
                "description": "gato"
            }                
        }

/* NEsted loop indie the intilize() method */

         for (var key in addresses1) {
                var obj = addresses1[key];
                for (var y = 0; y < 1; y++) {

                    var locat = obj.location;
                    var descrip = obj.description;

                    var myAddressQuery = locat;
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({'address': myAddressQuery}, function(results, status) {

                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                icon: image,
                                position: results[0].geometry.location,
                                title: descrip
                            });                    
                    });


                }
            }

Answer 1

similar question

If you add a "geocodeAddress" function to your code (to get function closure on the variable to create the marker, it will work.

function geocodeAddress(maddress, description, image, map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': maddress
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        icon: image,
        map: map,
        title: description
      });
      map.setCenter(results[0].geometry.location);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

working fiddle

Code snippet:

var geocoder;
var map;
var addresses1 = {
  "address_1": {
    "location": "Avenida de burgos, 9, madrid",
    "description": "gallina"
  },
  "address_2": {
    "location": "castellana, 169, madrid",
    "description": "pollo"
  },
  "address_3": {
    "location": "bilbao, 5, madrid",
    "description": "gato"
  }
};

function geocodeAddress(maddress, description, image, map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': maddress
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        icon: image,
        map: map,
        title: description
      });
      map.setCenter(results[0].geometry.location);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var image = "http://maps.google.com/mapfiles/ms/micons/blue-dot.png";

  for (var key in addresses1) {
    var obj = addresses1[key];
    for (var y = 0; y < 1; y++) {

      var locat = obj.location;
      var descrip = obj.description;

      geocodeAddress(locat, descrip, image, map);
    }
  }


}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>