CODEWITHSUNDEEP
javascriptgoogle-mapstitle
SamYan
SamYan

Reputation: 1571

Google Maps multiple markers

I have a little problem, I have the following code that apparently everything works fine except the titles of the marks. It always shows the last title of the array list. Someone knows why this error?

Code:

$(document).ready(function() {

            var options = {
                zoom: 7,
                center: new google.maps.LatLng(42.19708, 2.19075),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true
            };

            var geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById('map_canvas'), options);

            var companys = [
                ['Giga S.L', 'Plaça de Catalunya, Barcelona'],
                ['Torre M', 'Plaça d\'Espanya, Barcelona']
            ];

            var address;
            var title;

            for (var i = 0; i < companys.length; i++) {
                address = companys[i][1];
                title = companys[i][0];

                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);

                        new google.maps.Marker({
                            map: map,
                            animation: google.maps.Animation.DROP,
                            position: results[0].geometry.location,
                            title: title // ERROR: ALWAYS THE SAME TITLE
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
        });

Thank you in advance.

Best regards.

Upvotes: 0

Views: 337

Answers (2)

Andy
Andy

Reputation: 63550

One way to solve this is to wrap the call to geocode in an immediately-invoked function expression (IFFE), passing in your variables as parameters:

(function(address, title) { // the variables are passed in here as function parameters

  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);

      new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: results[0].geometry.location,
        title: title
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}(address, title)); // pass in address/title into the IFFE

Upvotes: 1

MichaC
MichaC

Reputation: 13400

geocoder.geocode has a callback function. This means the code runs asynchronously. You would have to restructure your code to retrieve the company title from within the callback.

In your code, the for loop already finished before the geocode callback returned, that's why your variable title is set to the last one.

Upvotes: 1

Related Questions