Question

174

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

rated 0 times [ 178] [ 4] / answers: 1 / hits: 125915 / 11 Years ago, mon, october 28, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefinap

Add To Favorites

Follow

Total Points: 548

Total Questions: 125

Total Answers: 106

Location: Angola

Member since Tue, May 5, 2020

4 Years ago

answered 11 Years ago dominics · Accepted Answer

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