Google Maps API : marqueurs et fenêtres d'informations

Posté par david le 21 Juin, 2007 - 18:27. Ingénierie web | JavaScript | Web 2.0

Ce second billet vous apprendra à ajouter des marqueurs affichant une fenêtre d'information lorsque l'on clique dessus.

Partons de l'exemple 2 du billet précédent auquel nous ajoutons le bloc suivant dans le corps, afin de prévenir les utilisateurs ne disposant pas de JavaScript :

<noscript> <b>JavaScript doit être activé pour utiliser Google Maps.</b> Il semblerait que JavaScript soit désactivé ou non supporté par votre navigateur. Pour visualiser les cartes Google Maps, activez JavaScript dans les options de votre navigateur et réessayez. </noscript>

Prévenons aussi les utilisateurs dont le navigateur n'est pas compatible avec l'API Google Maps en définissant la clause else du test de compatibilité dans la fonction load :

if (GBrowserIsCompatible()) { // ... } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); }

Ajoutons ensuite, lors de la création de la carte, dans la fonction load, l'affichage du contrôle de positionnement et de zoom :

map.addControl(new GLargeMapControl());

ainsi que le contrôle du type de carte (plan, satellite ou mixte) :

map.addControl(new GMapTypeControl());

Définissons un premier marqueur sur Mantes-la-Jolie (de coordonnées 48.9908338, 1.717222) :

var point = new GLatLng(48.9908338,1.717222); var marker = createMarker(point,'Ici, c\'est chez moi !') map.addOverlay(marker);

La fonction createMarker est la suivante :

function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; }

Le résultat est visible sur l'exemple 3.

La fenêtre d'information affiche du HTML standard et il est possible de définir autant de marqueur que l'on souhaite...

Plus de précisions : Markers and info windows.

Les autres billets de cette série sur l'API Google Maps :