Créer dans Googlemaps plusieurs marqueurs avec des infowindows (popup)
Le tutoriel de Google ne propose qu'une solution dans laquelle les données sont tirées d'un fichier XML, c'est très lourd lorsqu'on a que quelques marqueurs à placer. Les recherches sur le web ne donnent pas grand chose; la FAQ de developpez.net donne une piste avec des bribes de code mais pas trop d'explications détaillées.
Je cherchait quelques chose de SIMPLE et j'ai trouvé une solution en créant une propriété html sur les objets markers;
Voici un exemple réduit à l'essentiel (28 lignes !); bien sûr il faudra adapter pour la récupération des données dans un tableau ou objet; pour moi les données vont arriver par AJAX.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script async defer src="https://maps.googleapis.com/maps/api/js?key= *** VOTRE CLÉ GOOGLE *** &callback=InitCarte"></script>
<script>
function InitCarte() {
var longitude = -3;
var Carte = new google.maps.Map(document.getElementById('Carte'), {zoom: 8, center: {lat: 47, lng: -2}});
var InfoBulle = new google.maps.InfoWindow;
for (i=0; i<3; i++) {
var Marqueur = new google.maps.Marker({
map: Carte, position: {lat: 47, lng: longitude + 0.4 * i},
label: i.toString(),
title: "Bateau N° " + i.toString(),
icon: "bateau.png",
html: "<h1>Bulle N° " + i.toString() + "</h1><br><p>Bla bla bla ...</p>"}
);
google.maps.event.addListener(Marqueur, 'click', function() {InfoBulle.setContent(this.html); InfoBulle.open(Carte, this);});
}
}
</script>
</head>
<body>
<h3>Ma démo Google Maps.</h3>
<div id = "Carte" style = "height: 500px; width: 100%;"></div>
</body>
</html> |
Ligne 5 : L'api de Google est prévue pour de l'UTF8
Ligne 6 : Ne pas oublier de placer ici la clé fournie gratuitement par Google
Ligne 9 : pour l'exemple les vais placer 3 marqueurs à la même latitude mais avec une longitude qui sera incrémentée dans la boucle
Ligne 10 : Je crée la carte en allant au plus simple
Ligne 11 : J'instancie une InfoWindow
Ligne 14 : La longitude est incrémentée de 0,4 à chaque tour de boucle
Lignes 15 et 16 : On utilise la variable de boucle pour bien distinguer les marqueurs
Ligne 17 : J'ai sur le serveur un fichier d'icone : bateau.png (En réalisant la démo vous comprendrez pourquoi ...) mais on peux supprimer cette ligne.
Ligne 18 : Le plus intéressant, le code HTML de la popup est placé dans la propriété html du marqueur
Ligne 20 : La fonction anonyme déclarée ici aura pour propriétaire le marqueur qui déclenche l'event. On peux donc désigner CE marqueur par 'this' et récupérer le code de la popup
Et voici le micro-tutoriel que j'aurai aimé trouver ...
