Google maps Geocoder and Marker not working

Question

I'm trying to take an address in a for loop and get the latitude and longitude of that address and create a marker with the lat/long values.

I have the address converting to lat/long but I cannot get the "new Marker" to take the values.

Any suggestions?

                var latitude;
                var longitude;
                var myLatLng;

                for (i = 0; i < locations.length; i++) {

                    var geocoder = new google.maps.Geocoder();
                    var BuisAddress = locations[i][1];
                    geocoder.geocode({ 'address': BuisAddress }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            latitude = results[0].geometry.location.lat();
                            longitude = results[0].geometry.location.lng();
                            }
                        });


                    myLatLng = new google.maps.LatLng(latitude, longitude);
                    marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map
                    });

**** 1st UPDATE ****

if I do that, then only one marker shows up when I have multiple addresses and the marker popup doesn't work. If I do the following, then all three markers show up, but still none of clickable popup's work.

                    var geocoder = new google.maps.Geocoder();
                    BuisAddress = locations[i][1];
                    geocoder.geocode({ 'address': BuisAddress }, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                    latitude = results[0].geometry.location.lat();
                                    longitude = results[0].geometry.location.lng();
                                    myLatLng = new google.maps.LatLng(latitude, longitude);
                                    marker = new google.maps.Marker({
                                        position: myLatLng,
                                        map: map
                                    });
                                }
                            });


                    myLatLng = new google.maps.LatLng(latitude,longitude);
                    marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map
                    });



                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            var str = encodeURI(locations[i][1]).replace(",", "");
                            var address = str.replace(/%20/g, "+");
                         var infowindow = new google.maps.InfoWindow();

The geocoder is asynchronous. You need to **use** the returned result in the callback function. — geocodezip, Sep 18 '15 at 19:56
Related question: [Multi address array Google maps Uncaught TypeError: Cannot read property '0' of undefined](http://stackoverflow.com/questions/32318578/multi-address-array-google-maps-uncaught-typeerror-cannot-read-property-0-of) — geocodezip, Sep 18 '15 at 19:58
Related question: [Mapping multiple locations with Google Maps JavaScript API v3 and Geocoding API](http://stackoverflow.com/questions/29463131/mapping-multiple-locations-with-google-maps-javascript-api-v3-and-geocoding-api) — geocodezip, Sep 18 '15 at 19:59

ScaisEdge · Answer 1 · 2015-09-19T06:02:41.747

You can try this way (i added a marker vector for manage the vector collection)

    var latitude;
    var longitude;
    var myLatLng;

    myMarker  = []
    for (i = 0; i < locations.length; i++) {

        geocoder.geocode({ 'address': BuisAddress }, function (results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                        latitude = results[0].geometry.location.lat();
                                        longitude = results[0].geometry.location.lng();
                                        myLatLng = new google.maps.LatLng(latitude, longitude);
                                        marker[i] = new google.maps.Marker({
                                            position: myLatLng,
                                            map: map
                                        });
                                    }
                                });

        google.maps.event.addListener(marker[i], 'click', (function(marker[i], i) {
                                return function() {
                                    var str = encodeURI(locations[i][1]).replace(",", "");
                                    var address = str.replace(/%20/g, "+");
                                    var infowindow = new google.maps.InfoWindow();
                                }
        }));

    }

Respect to first question i see more code. I watched only the fact that the marker could not be set up outside the callback function to geocode.Then you have a loop for more than one location and a listerner that displays an info windows for each marker. Right? — ScaisEdge, Sep 19 '15 at 05:54
I have update the answer adding a marke's vector for manage the marker's collection. I hope this could be useful for you. — ScaisEdge, Sep 19 '15 at 06:02
Thanks geocodezip, I took a look at the second related question you posted and I found a way to get it all done! — Tyler Robinson, Sep 19 '15 at 08:41

score 0 · Accepted Answer · answered Sep 19 '15 at 08:46

If anyone is wondering how I did it, here it is!

function geocodeAddress(locations, i) {
  var title = locations[i][0];
  var address = locations[i][1];
  var url = locations[i][2];
  var latitude;
  var longitude;
  geocoder.geocode({
      'address': locations[i][1]
    },

    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
            latitude = results[0].geometry.location.lat();
            longitude = results[0].geometry.location.lng();
        var marker = new google.maps.Marker({
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
          map: map,
          position: results[0].geometry.location,
          title: title,
          animation: google.maps.Animation.DROP,
          address: address,
          url: url,
          latitude: latitude,
          longitude: longitude
        })
        infoWindow(marker, map, title, address, url, latitude, longitude);
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
      } else {
        alert("geocode of " + address + " failed:" + status);
      }
    });
}

function infoWindow(marker, map, title, address, url, latitude, longitude) {
  google.maps.event.addListener(marker, 'click', function() {
      var html ="html code here...";
    iw = new google.maps.InfoWindow({
      content: html,
      maxWidth: 350
    });
    iw.open(map, marker);
  });
}

function createMarker(results) {
  var marker = new google.maps.Marker({
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
    map: map,
    position: results[0].geometry.location,
    title: title,
    animation: google.maps.Animation.DROP,
    address: address,
    url: url
  })
  bounds.extend(marker.getPosition());
  map.fitBounds(bounds);
  infoWindow(marker, map, title, address, url);
  return marker;
}

Google maps Geocoder and Marker not working

2 Answers2