GMaps API V3 - Plusieurs repères & InfoWindow
Je sais, c'est récurrent mais... j'ai un gros problème avec mes marqueurs multiples : elles ont toutes le même titre et le même infowindow contenu.
J'ai cherché sur de nombreux sites web, mais je n'ai pas trouver où est le problème dans mon code.
J'espère que vous pourrez m'aider (je suis sûr que c'est le cas !)
C'est mon code :
<script type="text/javascript">
var map;
var geocoder;
$(document).ready(function() {
initializeMap();
});
function initializeMap() {
var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"[email protected]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[email protected]"}];
var center = new google.maps.LatLng(40.667, -73.833);
var myOptions = {
zoom: 8,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
for (i = 0; i < people.length; i++) {
var p = people[i];
geocoder.geocode( { 'address': p["address"]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
title:p["lastname"] + " " + p["firstname"],
position: results[0].geometry.location
});
var myWindowOptions = {
content:
'<h3>'+p["lastname"] + " " + p["firstname"]+'</h3>'+
'<p>'+p["address"]
};
var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
myInfoWindow.open(map,marker);
});
});
}
}
</script>
J'ai vraiment l'espoir que quelqu'un peut me montrer mon erreur(s) et merci beaucoup pour l'aide !!
Non, je ne comprends vraiment pas,
Il devrait être quelque chose que je n'ai pas vu dans mon code :
<script type="text/javascript">
var map;
var geocoder;
$(document).ready(function() {
initializeMap();
});
function initializeMap() {
var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"[email protected]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[email protected]"}];
var center = new google.maps.LatLng(50.833, 25.000);
var myOptions = {
zoom: 8,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < people.length; i++) {
alert(people[i]['address']);
geocoder.geocode( { 'address': people[i]["address"]}, function(results, status) {
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h3>'+people[i]["lastname"] + " " + people[i]["firstname"]+'</h3>');
infowindow.open(map, marker);
}
})(marker, i));
});
}
}
</script>
Merci pour l'aide !! 🙂
OriginalL'auteur Gerfaut | 2011-07-28
Vous devez vous connecter pour publier un commentaire.
Vous avez à stocker des références pour tous vos marqueurs et tous les infowindows. C'est l'idée principale. Voici l'un des liens que j'ai trouvé et utilisé avant
http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Il est bien connu de problème. Il y a beaucoup d'infos la concernant. Essayez de searh il y.
J'espère que ce sera utile.
OriginalL'auteur Ruslan Polutsygan
J'ai frappé trop, et j'ai juste couru hors de lui (un assez bâtard d'une chose, à mon humble avis).
Le principal problème ici est à l'asynchrone geocoder.de géocodage() fonction: la ligne de rappel dans lequel vous écrivez votre code est exécuté à l'arbitraire dans le temps (le temps que google prend pour répondre à votre demande), et il n'a rien à voir avec votre cycle.
Pour cette raison, votre je variable compteur contiendra souvent la dernière valeur possible, parce que l'exécution d'un court pour cycle est beaucoup plus rapide qu'une requête http pour atteindre le serveur et revenir.
Principalement, la solution est de combiner les toghether ce
GMaps JS Géocodage: Utilisation/Passer des Variables Avec Asynchrone Fonction de Géocodage?
avec cette
http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
comme l'a fait observer à partir de Ruslan Polutsygan.
Ce qui fait le vrai truc à moi, c'était de garder tout itératif de l'opération à l'extérieur de la geocoder de rappel. Donc, c'est le 'core':
et c'est comment je l'utilise:
où données est une variable json, j'ai généré côté serveur, et il se compose d'un nom et d'une adresse (celle que nous passons à la geocoder).
Évidemment, vous devez initialiser votre carte d'ailleurs (je ne jquery dans le document.prêt()) et le déclarer comme une variable globale, à l'instar de l'infoWindow instance aswell.
OriginalL'auteur brazorf
Voici un exemple de code qui fonctionne pour moi
OriginalL'auteur bsting