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


                }
            }

Limited connection to the internet, I cant really reach! – Polo Oct 21 '14 at 16:21 — Polo, Oct 21 '14 at 16:21

score 0 · Accepted Answer · edited May 23 '17 at 12:32

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>

thank you, @geocodezip, I finally made it work last night doing something very similar. Thank you again! — Polo, Oct 22 '14 at 10:23

markers with titles from object, always repeated the title

1 Answers1