Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad

Question

I have to implement the multiple markers functionality from array of addresses. The string of addresses are being fetched from the database.

My array of addresses looks like this

    var address = <?php echo $add_js ?>;

I have gone through so many examples on internet and even in this forum, but in most of the examples latitude and longitude is already available in those databases. Is there any way so that i use that array of address and put multiple markers on google map. or any example where this type of concept is explained?!

I have practiced this example from JSFIDDLE but i am getting no output.

       <script>
   var geocoder;
       var map;
       var markersArray = [];

   function initialize() 
    {
        geocoder = new google.maps.Geocoder();

    latlang = geocoder.geocode( { 

           'address': 'New Delhi, India'},                                             

            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
            });
            markersArray.push(marker);

             }
             else
           {
               alert("Geocode was not successful for the following reason: " + status);
                       }
           });

          var myOptions = 
          {
                      center: latlang, zoom: 5, 
          mapTypeId: google.maps.MapTypeId.SATELLITE,
                      navigationControlOptions: 
          {
                   style: google.maps.NavigationControlStyle.SMALL
                      }
                      };
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                     plotMarkers();
                    }

               var locationsArray = new Array(
               "New Delhi, India", "Gurgaon,Haryana,  India", "Mumbai, India", 
               "Noida Sector-63,India","Banglore, Karnataka,India");

              function plotMarkers(){

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

          codeAddresses(locationsArray[i]);

          }
          }

         function codeAddresses(address){
         geocoder.geocode( { 'address': address}, 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
            });
        //markersArray.push(marker); 
        }
        else{
        alert("Geocode was not successful for the following reason: " + status);
        }
        });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        </script>

If you have more than ~10 addresses in your array you will run into the quota and query limits on the geocoder. You don't want to geocode addresses on page load, and certainly not known addresses (unless you build your own geocoder). — geocodezip, Oct 28 '13 at 16:38
@geocodezip then what steps should i follow to make it workable? i certainly have database with more than 10 addresses. — analyticalpicasso, Oct 28 '13 at 16:59
You should geocode those addresses offline (if you use google's geocoder, you can only "cache" them temporarily so you need to add a mechanism to periodically re-geocode the addresses), then use the coordinates to place the markers on page load. — geocodezip, Oct 28 '13 at 17:27
@geocodezip sir can you provide me some tutorial link on this concept? — analyticalpicasso, Oct 28 '13 at 17:32
Hey agnes what happens if you have more than 10 addresses, did you figure out a solution? — Lion789, Jan 20 '14 at 00:42
@Lion789 yeah! Will provide you a solution in a while if you haven't found it yet. — analyticalpicasso, Jan 20 '14 at 15:20
@Lion789 please check the update of my question for your solution! — analyticalpicasso, Jan 20 '14 at 16:20

score 49 · Answer 1 · answered Oct 28 '13 at 17:07

49

Regardless of your situation, heres a working demo that creates markers on the map based on an array of addresses.

http://jsfiddle.net/P2QhE/

Javascript code embedded aswell:

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });

        });
    }

});

answered Oct 28 '13 at 17:07

netbrain

9,194
6
42
68

3

use a jQuery $.each() call for arrays. It's much easier than a 'for' loop. $.each(addresses, function(){ /*your code here*/); – Justin Russo Jul 30 '14 at 22:32
1

I need to zoom in. how can I do this? – fc123 Nov 27 '14 at 16:22
Increase value of Zoom in myOptions. – Yatix Jun 09 '15 at 14:03
I think the LatLng is not necessary, Marker position can take 'p' (location object) directly. – hello_harry Aug 16 '15 at 01:59
3

This doesn't do anything to avoid the OVER_QUERY_LIMIT error. – Andrew Hubbs Oct 27 '15 at 00:35
I have been searching for this exact solution for my website... the question is, how do i use it in my website if i were to incorporate it? This works in JSFiddle, but I could not get it to work in my page, How do i use the external javascript file that you used? – Vishwanth Iron Heart Apr 23 '16 at 13:34
1

I see, every time a new http request is initiated for geocoding each time. Can't this be done with one single request api? – Amir Aslam Jun 28 '20 at 14:12

analyticalpicasso · Accepted Answer · 2018-07-11T07:11:36.367

Answer to add multiple markers.

UPDATE (GEOCODE MULTIPLE ADDRESSES)

Here's the working Example Geocoding with multiple addresses.

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
 </script> 
 <script type="text/javascript">
  var delay = 100;
  var infowindow = new google.maps.InfoWindow();
  var latlng = new google.maps.LatLng(21.0000, 78.0000);
  var mapOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var geocoder = new google.maps.Geocoder(); 
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var bounds = new google.maps.LatLngBounds();

  function geocodeAddress(address, next) {
    geocoder.geocode({address:address}, function (results,status)
      { 
         if (status == google.maps.GeocoderStatus.OK) {
          var p = results[0].geometry.location;
          var lat=p.lat();
          var lng=p.lng();
          createMarker(address,lat,lng);
        }
        else {
           if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            nextAddress--;
            delay++;
          } else {
                        }   
        }
        next();
      }
    );
  }
 function createMarker(add,lat,lng) {
   var contentString = add;
   var marker = new google.maps.Marker({
     position: new google.maps.LatLng(lat,lng),
     map: map,
           });

  google.maps.event.addListener(marker, 'click', function() {
     infowindow.setContent(contentString); 
     infowindow.open(map,marker);
   });

   bounds.extend(marker.position);

 }
  var locations = [
           'New Delhi, India',
           'Mumbai, India',
           'Bangaluru, Karnataka, India',
           'Hyderabad, Ahemdabad, India',
           'Gurgaon, Haryana, India',
           'Cannaught Place, New Delhi, India',
           'Bandra, Mumbai, India',
           'Nainital, Uttranchal, India',
           'Guwahati, India',
           'West Bengal, India',
           'Jammu, India',
           'Kanyakumari, India',
           'Kerala, India',
           'Himachal Pradesh, India',
           'Shillong, India',
           'Chandigarh, India',
           'Dwarka, New Delhi, India',
           'Pune, India',
           'Indore, India',
           'Orissa, India',
           'Shimla, India',
           'Gujarat, India'
  ];
  var nextAddress = 0;
  function theNext() {
    if (nextAddress < locations.length) {
      setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
      nextAddress++;
    } else {
      map.fitBounds(bounds);
    }
  }
  theNext();

</script>

As we can resolve this issue with setTimeout() function.

Still we should not geocode known locations every time you load your page as said by @geocodezip

Another alternatives of these are explained very well in the following links:

How To Avoid GoogleMap Geocode Limit!

Geocode Multiple Addresses Tutorial By Mike Williams

Example by Google Developers

Hi @analyticalpicasso, i have used your code with slight modifications and its working perfectly. **issue** :When i used 4 filter functions (like calling an API to get the new locations based on the filter) in a same page, the map is not reloading. **already mapped locations is not removed and new location is not updated** could you please help me with this.. thanks. — Manush Venkatesh, Aug 07 '18 at 11:45

score 4 · Answer 3 · answered Mar 11 '14 at 19:53

Here is my solution:

dependencies: Gmaps.js, jQuery

var Maps = function($) {
   var lost_addresses = [],
       geocode_count  = 0;

   var addMarker = function() { console.log('Marker Added!') };

   return {
     getGecodeFor: function(addresses) {
        var latlng;
        lost_addresses = [];
        for(i=0;i<addresses.length;i++) {
          GMaps.geocode({
            address: addresses[i],
            callback: function(response, status) {
              if(status == google.maps.GeocoderStatus.OK) {
                addMarker();
              } else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                lost_addresses.push(addresses[i]);
              }

               geocode_count++;
               // notify listeners when the geocode is done
               if(geocode_count == addresses.length) {
                 $.event.trigger({ type: 'done:geocoder' });
               }
            }
          });
        }
     },
     processLostAddresses: function() {
       if(lost_addresses.length > 0) {
         this.getGeocodeFor(lost_addresses);
       }
     }
   };
}(jQuery);

Maps.getGeocodeFor(address);

// listen to done:geocode event and process the lost addresses after 1.5s
$(document).on('done:geocode', function() {
  setTimeout(function() {
    Maps.processLostAddresses();
  }, 1500);
});

Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad

3 Answers3

Linked