I have custom google map multiple markers.when i am using reverse geolocation for multiple marker

Question

I have custom google map multiple markers.when i am using reverse geolocation for multiple marker i am receiving unknown adddress for most of the markers if i use alert btwn the call i get the result for most address

for(var z = 0 ; z < markersArray.length; z++){
    alert(z);
    geocoder.geocode({'location': markersArray[z].position}, function(results, status) {

        if(status == 'OK'){
            if(results != null){
                address = address + z +" : "+ results[1].formatted_address + "<br>";
                alert(z);
            }
            else
            {

                address = address + z +" : "+"Unknown Address" + "<br>";
            }
        }
        else{
            alert(z);
            address = address + z +" : "+"Unknown Address"+ "<br>";
        }

    });
}

Sends like you haven't accounted for the asynchronous nature of the geocoder. Please provide a [mcve] that demonstrates your issue. — geocodezip, Oct 21 '16 at 06:32

score 1 · Answer 1 · answered Oct 21 '16 at 06:36

1

Try to add a short delay between the calls. Had the same problem once, checking the result of each call and try resending them a couple times helped.

answered Oct 21 '16 at 06:36

Julli Schaf

92
1
10

score 1 · Accepted Answer · edited May 23 '17 at 12:13

The geocoder is asynchronous. By the time the callback function runs the loop has completed and z is equal to markersArray.length (which isn't a valid entry of the array). This problem can be solved with function closure (example in [this question: Google Maps JS API v3 - Simple Multiple Marker Example for the marker click listener functions.

for (var z = 0; z < markersArray.length; z++) {
  geocoder.geocode({
    'location': markersArray[z].position
  }, (function(z) {
    // get function closure on z
    return function(results, status) {
      if (status == 'OK') {
        if (results != null) {
          var address = z + " : " + results[0].formatted_address + "<br>";
          var marker = new google.maps.Marker({
            position: markersArray[z].position,
            title: address,
            map: map
          });
          bounds.extend(marker.getPosition());
          map.fitBounds(bounds);
          google.maps.event.addListener(marker,'click', function(evt) {
           infowindow.setContent(address);
           infowindow.open(map, this);
          })
        } else {
          var address = z + " : " + "Unknown Address" + "<br>";
        }
      } else {
        var address = z + " : " + "Unknown Address" + "<br>";
      }
    }
  })(z));
}

proof of concept fiddle

code snippet:

var geocoder;
var map;
var markersArray = [{position: {lat: 40.7127837,lng: -74.0059413}},
{position: {lat: 40.735657,lng: -74.1723667}},
{position: {lat:39.2903848,lng: -76.6121893}},
{position: {lat: 39.9525839,lng: -75.1652215}}];
function initialize() {
  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
    });
  geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  for (var z = 0; z < markersArray.length; z++) {
    geocoder.geocode({
      'location': markersArray[z].position
    }, (function(z) {
      // get function closure on z
      return function(results, status) {

        if (status == 'OK') {
          if (results != null) {
            var address = z + " : " + results[0].formatted_address + "<br>";
            var marker = new google.maps.Marker({
              position: markersArray[z].position,
              title: address,
              map: map
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
            google.maps.event.addListener(marker, 'click', function(evt) {
              infowindow.setContent(address);
              infowindow.open(map, this);
            })
          } else {
            var address = z + " : " + "Unknown Address" + "<br>";
          }
        } else {
          var address = z + " : " + "Unknown Address" + "<br>";
        }
      }
    })(z));
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

If we have around 50 locations it will give only 3 or 5 results only — Add Makes, Nov 04 '16 at 07:42
if i take more than 5 values in markers array all other values more than five are not displayed in the map — Add Makes, Nov 07 '16 at 04:34
http://jsfiddle.net/addmakes02/L5dpq83q/14/ Here i have taken 9 values in array only five are piloting on map — Add Makes, Nov 07 '16 at 06:44
I see OVER_QUERY_LIMIT status in that fiddle. Why do you say you aren't getting it? — geocodezip, Nov 07 '16 at 08:15
Yes sorry i am getting OVER_QUERY_LIMIT is there any way to solve this query limit in this code — Add Makes, Nov 07 '16 at 10:24
http://stackoverflow.com/search?q=%5Bgoogle-maps-api-3%5D+OVER_QUERY_LIMIT — geocodezip, Nov 07 '16 at 14:41

I have custom google map multiple markers.when i am using reverse geolocation for multiple marker

2 Answers2