Javascript Girl
  1. Javascript Girl
  3. Plusieurs marqueurs Google Map API v3 à partir d'un tableau d'adresses et évitez OVER_QUERY_LIMIT pendant le géocodage sur pageLoad
Intereting Posts
Sélecteur jQuery pour les entrées avec crochets dans l'attribut name Comment fonctionne l'opérateur RxJs 5 share ()? Comment re-rendre la page après une base de données ajouter un appel sans rafraîchir? Avantages de la fonction anonyme JavaScript avec espaces de noms Remplacer les caractères de l'espace unicode Essayer de localiser la fonction dans les fichiers JavaScript à l'aide de Firebug Que signifient les pignons dans les rails Sélectionnez différentes feuilles de style CSS pour différentes tailles de fenêtre de navigateur? Mise à jour de la base de données en utilisant Javascript Réducteurs Redux initialisant la même clé d'état Comment puis-je détecter le nombre de canaux audio dans un mp3 dans une balise <audio>? D3 clique des coordonnées après pan et zoom Que se passe-t-il dans ce code avec des objets Nombre contenant des propriétés et en augmentant le nombre? Suppression de l'espace blanc dans jQuery Node, Express, domaines, exceptions non prises – perdu encore

Plusieurs marqueurs Google Map API v3 à partir d'un tableau d'adresses et évitez OVER_QUERY_LIMIT pendant le géocodage sur pageLoad

Je dois implémenter la fonctionnalité des marqueurs multiples à partir d'un tableau d'adresses. La chaîne d'adresses est extraite de la base de données.

Mon ensemble d'adresses ressemble à ceci 

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

J'ai rencontré tant d'exemples sur Internet et même dans ce forum, mais dans la plupart des exemples, la latitude et la longitude sont déjà disponibles dans ces bases de données. Existe-t-il un moyen d'utiliser ce réseau d'adresses et de mettre plusieurs marqueurs sur la carte google. Ou n'importe quel exemple où ce type de concept est expliqué?

J'ai pratiqué cet exemple de JSFIDDLE mais je n'obtiens aucune sortie. 

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

Indépendamment de votre situation, il existe une démo fonctionnelle qui crée des marqueurs sur la carte en fonction d'un éventail d'adresses.

http://jsfiddle.net/P2QhE/

Le code Javascript est également intégré: 

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

Réponse pour ajouter plusieurs marqueurs.

MISE À JOUR (JOINTS MULTIPLES DE GEOCODE)

Voici l'exemple de fonctionnement Géocodage avec plusieurs adresses. 

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

Comme nous pouvons résoudre ce problème avec la fonction setTimeout() .

Pourtant, nous ne devrions pas géocoder les emplacements connus chaque fois que vous chargez votre page comme indiqué par @geocodezip

D'autres alternatives sont expliquées très bien dans les liens suivants:

Comment éviter la limite Geocode GoogleMap!

Didacticiel Geocode Multiple Addresses Par Mike Williams

Exemple par Google Developers

Voici ma solution:

Dépendances: 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); });