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

Answer 1

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

    }

Answer 2

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