Google Maps Marker Wrong Position

I've got multiple markers on a map. But it won't attach the corresponding infoWindows to the marker. They are always in the upper left corner. Don't know what's interfering here.

Solution 1:

it is failing here (as MrUpsidown observed) infowindow.setContent(addresses[i]); because when the click listener runs i=4 and addresses[4] doesn't exist.

One way to solve your problem is to use function closure on the geocode function as well as the marker (below). But again as MrUpsidown observes, if you have more than about 10 addresses, it won't work.

functiongeocodeAddress(addresses, i) {
     geocoder.geocode( { 'address' : addresses[i]}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         // map.setCenter(results[0].geometry.location);
         marker = new google.maps.Marker({
             map: map,
             position: results[0].geometry.location
         });

         google.maps.event.addListener(marker, 'click', (function(marker, i) {
             returnfunction() {
               infowindow.setContent(addresses[i]);
               infowindow.open(map, marker);
             };
         })(marker, i));

         bounds.extend(results[0].geometry.location);
         map.setCenter(bounds.getCenter());
         map.fitBounds(bounds);
       } else {
         alert("Geocode was not successful for the following reason: " + status);
       }
     });
}

Working code snippet:

functiongeocodeAddress(addresses, i) {
         geocoder.geocode( { 'address' : addresses[i]}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             // map.setCenter(results[0].geometry.location);
             marker = new google.maps.Marker({
                 map: map,
                 position: results[0].geometry.location
             });

             google.maps.event.addListener(marker, 'click', (function(marker, i) {
                 returnfunction() {
                   infowindow.setContent(addresses[i]);
                   infowindow.open(map, marker);
                 };
             })(marker, i));

             bounds.extend(results[0].geometry.location);
             map.setCenter(bounds.getCenter());
             map.fitBounds(bounds);
           } else {
             alert("Geocode was not successful for the following reason: " + status);
           }
         });
    }

    var geocoder = new google.maps.Geocoder();
   
    var addresses = [
        'Marienstr. 37a 27472 Cuxhaven',
        'Bahnhofstr. 15 21745 Hemmoor',
        'Richtpfad 20 26506 Norden',
        'Eulenbusch 4 21391 Reppenstedt'
    ];
    
    var bounds = new google.maps.LatLngBounds();
    
    var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
   
   var infowindow = new google.maps.InfoWindow(), marker, i;
   
   for (i=0; i < addresses.length; i++) {
        geocodeAddress(addresses,i);
    }

<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><divid="map"style="width: 500px; height: 400px;"></div>

Solution 2:

The geocoder is asynchronous. Your for loop ends before the first geocoding request gets a response. So you can't use i because it will always be 4 and addresses[4] doesn't exist.

Anyway you shouldn't do it this way because:

The Google Maps API provides a geocoder class for geocoding and reverse geocoding dynamically from user input. When you first load the API, you will be allocated an initial quota of Geocoding requests. Once you have used this quota, additional requests will be rate-limited on a per-second basis. If instead you wish to geocode static, known addresses, see the Geocoding web service documentation.

https://developers.google.com/maps/documentation/javascript/geocoding

You may hit the limits if you geocode a lot of addresses, especially in loops (per second limit).

Read more here: https://developers.google.com/maps/articles/geocodestrat