Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Dans cet exemple, nous allons créer deux cartes :
La première carte :
Dessus s'affichent tous les marqueurs pointant des lieux caractéristiques.
En survolant les marqueurs avec la souris, un commentaire apparaît.
Un "click" sur l'un des marqueurs n'affiche aucune info-bulle, mais va interagir sur la seconde carte.
La seconde carte :
Dès qu'un "click" est détecté sur la première carte, la seconde carte :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var maCarte;
var CarteZoom;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps */
if (google.maps.BrowserIsCompatible()) {
/* Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" */
maCarte = new google.maps.Map2(document.getElementById('EmplacementDeMaCarte'));
/* La carte nommée "maCarte" est centrée sur la Latitude 47.168076, la Longitude 0.235895, avec un niveau de zoom égal à 9 */
maCarte.setCenter(new google.maps.LatLng(47.168076,0.235895), 9);
/* La carte nommée "maCarte" est fixe (on désactive la possibilité de la faire glisser) */
maCarte.disableDragging();
/* Création d'une nouvelle carte nommée "CarteZoom" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeCarteZoom" */
CarteZoom = new google.maps.Map2(document.getElementById('EmplacementDeCarteZoom'), {mapTypes:[G_SATELLITE_MAP]});
/* La carte nommée "CarteZoom" est centrée sur la Latitude 47.168076, la Longitude 0.235895, avec un niveau de zoom égal à 9 */
CarteZoom.setCenter(new google.maps.LatLng(47.168076,0.235895), 9);
/* Création d'un nouveau point nommé "point" à la Latitude : 47.168076 et à la Longitude : 0.235895 */
var point = new google.maps.LatLng(47.168076,0.235895);
/* Création d'un nouveau marqueur nommé "marqueur" en appelant la fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point créé ci-dessus */
/* 'Point caractéristique N° 1<br />Niveau de Zoom : 17' : Texte s'affichant dans l'info-bulle liée au marqueur */
/* 'Marqueur 1' : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* 17 : Niveau de zoom */
var marqueur = createMarker(point,'Point caractéristique N° 1<br />Niveau de Zoom : 17','Marqueur 1',17)
/* Ajoute sur la carte nommée "maCarte" le marqueur nommé "marqueur" */
maCarte.addOverlay(marqueur);
/* Création d'un nouveau point nommé "point" à la Latitude : 47.268076 et à la Longitude : 0.235895 */
var point = new google.maps.LatLng(47.268076,0.235895);
/* Création d'un nouveau marqueur nommé "marqueur" en appelant la fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point créé ci-dessus */
/* 'Point caractéristique N° 2<br />Niveau de Zoom : 8' : Texte s'affichant dans l'info-bulle liée au marqueur */
/* 'Marqueur 2' : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* 8 : Niveau de zoom */
var marqueur = createMarker(point,'Point caractéristique N° 2<br />Niveau de Zoom : 8','Marqueur 2',8)
/* Ajoute sur la carte nommée "maCarte" le marqueur nommé "marqueur" */
maCarte.addOverlay(marqueur);
/* Création d'un nouveau point nommé "point" à la Latitude : 47.168076 et à la Longitude : 0.335895 */
var point = new google.maps.LatLng(47.168076,0.335895);
/* Création d'un nouveau marqueur nommé "marqueur" en appelant la fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point créé ci-dessus */
/* 'Point caractéristique N° 3<br />Niveau de Zoom : 12' : Texte s'affichant dans l'info-bulle liée au marqueur */
/* 'Marqueur 3' : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* 12 : Niveau de zoom */
var marqueur = createMarker(point,'Point caractéristique N° 3<br />Niveau de Zoom : 12','Marqueur 3',12)
/* Ajoute sur la carte nommée "maCarte" le marqueur nommé "marqueur" */
maCarte.addOverlay(marqueur);
}else{
/* affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/* Fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point sur lequel sera ancré le marqueur */
/* TexteAuFormatHTML : Texte au format HTML s'affichant dans l'info-bulle liée au marqueur */
/* Titre : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* ValeurDuZoom : Niveau de zoom */
function createMarker(point,TexteAuFormatHTML,Titre,ValeurDuZoom) {
/* Création d'un nouveau marqueur nommé "marqueur" ancré sur le point nommé "point" */
/* L'option "title:" permet d'afficher le contenu de "Titre" sous le marqueur lorsque celui-ci est survolé par la souris */
var marqueur = new google.maps.Marker(point,{title:Titre});
/* Création d'un nouveau marqueur nommé "marqueurzoom" ancré sur le point nommé "point" */
var marqueurzoom = new google.maps.Marker(point);
/* ValZoom = ValeurDuZoom */
var ValZoom = ValeurDuZoom;
/* Ajout d'un observateur d'événement au marqueur nommé "marqueur" */
/* L'événement observé est "click". */
/* Lorsqu'un clic sera détecté sur le marqueur nommé "marqueur", le code contenu à l'intérieur de function(){...code à exécuter...} sera exécuté */
google.maps.Event.addListener(marqueur, 'click', function() {
/* Efface tous les marqueurs présents sur la carte nommée "CarteZoom" */
CarteZoom.clearOverlays();
/* La carte nommée "CarteZoom" est centrée sur le point auquel est ancré le marqueur nommé "marqueurzoom", avec un niveau de zoom égal à "ValZoom" */
CarteZoom.setCenter(marqueurzoom.getPoint(),ValZoom);
/* Ajout du marqueur nommé "marqueurzoom" sur la carte nommée "CarteZoom" */
CarteZoom.addOverlay(marqueurzoom);
/* Ouvre l'info-bulle liée au marqueur nommé "marqueurzoom", puis affiche à l'intérieur le contenu de "TexteAuFormatHTML" */
marqueurzoom.openInfoWindowHtml(TexteAuFormatHTML, {maxWidth:160});
});
/* Ajout d'un observateur d'événement au marqueur nommé "marqueurzoom" */
/* L'événement observé est "click". */
/* Lorsqu'un clic sera détecté sur le marqueur nommé "marqueurzoom", le code contenu à l'intérieur de function(){...code à exécuter...} sera exécuté */
google.maps.Event.addListener(marqueurzoom, 'click', function() {
/* Ouvre l'info-bulle liée au marqueur nommé "marqueurzoom", puis affiche à l'intérieur le contenu de "TexteAuFormatHTML" */
marqueurzoom.openInfoWindowHtml(TexteAuFormatHTML, {maxWidth:160});
});
/* Retourne marqueur */
return marqueur;
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
</script>
<style type="text/css">
<!--
#contmap {
position:relative;
width:100%;
height:400px;
z-index:2;
}
#EmplacementDeMaCarte {
float: left;
width: 50%;
height: 400px;
border: none;
}
#EmplacementDeCarteZoom {
float: right;
width: 50%;
height: 400px;
border: none;
}
-->
</style>
</head>
<body>
<div id="contmap">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de la -->
<!-- balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<div id="EmplacementDeMaCarte"></div>
<!-- La carte nommée "CarteZoom", va venir s'afficher à l' intérieur de la -->
<!-- balise <div> ayant pour identifiant id="EmplacementDeCarteZoom". -->
<div id="EmplacementDeCarteZoom"></div>
</div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"></script>
<script type="text/javascript">
/* Déclaration des variables globales */
var maCarte;
var CarteZoom;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps */
if (GBrowserIsCompatible()) {
/* Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" */
maCarte = new GMap2(document.getElementById('EmplacementDeMaCarte'));
/* La carte nommée "maCarte" est centrée sur la Latitude 47.168076, la Longitude 0.235895, avec un niveau de zoom égal à 9 */
maCarte.setCenter(new GLatLng(47.168076,0.235895), 9);
/* La carte nommée "maCarte" est fixe (on désactive la possibilité de la faire glisser) */
maCarte.disableDragging();
/* Création d'une nouvelle carte nommée "CarteZoom" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeCarteZoom" */
CarteZoom = new GMap2(document.getElementById('EmplacementDeCarteZoom'), {mapTypes:[G_SATELLITE_MAP]});
/* La carte nommée "CarteZoom" est centrée sur la Latitude 47.168076, la Longitude 0.235895, avec un niveau de zoom égal à 9 */
CarteZoom.setCenter(new GLatLng(47.168076,0.235895), 9);
/* Création d'un nouveau point nommé "point" à la Latitude : 47.168076 et à la Longitude : 0.235895 */
var point = new GLatLng(47.168076,0.235895);
/* Création d'un nouveau marqueur nommé "marqueur" en appelant la fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point créé ci-dessus */
/* 'Point caractéristique N° 1<br />Niveau de Zoom : 17' : Texte s'affichant dans l'info-bulle liée au marqueur */
/* 'Marqueur 1' : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* 17 : Niveau de zoom */
var marqueur = createMarker(point,'Point caractéristique N° 1<br />Niveau de Zoom : 17','Marqueur 1',17)
/* Ajoute sur la carte nommée "maCarte" le marqueur nommé "marqueur" */
maCarte.addOverlay(marqueur);
/* Création d'un nouveau point nommé "point" à la Latitude : 47.268076 et à la Longitude : 0.235895 */
var point = new GLatLng(47.268076,0.235895);
/* Création d'un nouveau marqueur nommé "marqueur" en appelant la fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point créé ci-dessus */
/* 'Point caractéristique N° 2<br />Niveau de Zoom : 8' : Texte s'affichant dans l'info-bulle liée au marqueur */
/* 'Marqueur 2' : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* 8 : Niveau de zoom */
var marqueur = createMarker(point,'Point caractéristique N° 2<br />Niveau de Zoom : 8','Marqueur 2',8)
/* Ajoute sur la carte nommée "maCarte" le marqueur nommé "marqueur" */
maCarte.addOverlay(marqueur);
/* Création d'un nouveau point nommé "point" à la Latitude : 47.168076 et à la Longitude : 0.335895 */
var point = new GLatLng(47.168076,0.335895);
/* Création d'un nouveau marqueur nommé "marqueur" en appelant la fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point créé ci-dessus */
/* 'Point caractéristique N° 3<br />Niveau de Zoom : 12' : Texte s'affichant dans l'info-bulle liée au marqueur */
/* 'Marqueur 3' : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* 12 : Niveau de zoom */
var marqueur = createMarker(point,'Point caractéristique N° 3<br />Niveau de Zoom : 12','Marqueur 3',12)
/* Ajoute sur la carte nommée "maCarte" le marqueur nommé "marqueur" */
maCarte.addOverlay(marqueur);
}else{
/* affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/* Fonction createMarker() */
/* Les paramètres suivants sont fournis à la fonction createMarker() : */
/* point : point sur lequel sera ancré le marqueur */
/* TexteAuFormatHTML : Texte au format HTML s'affichant dans l'info-bulle liée au marqueur */
/* Titre : Titre apparaissant sous le marqueur lorsque celui-ci est survolé par la souris */
/* ValeurDuZoom : Niveau de zoom */
function createMarker(point,TexteAuFormatHTML,Titre,ValeurDuZoom) {
/* Création d'un nouveau marqueur nommé "marqueur" ancré sur le point nommé "point" */
/* L'option "title:" permet d'afficher le contenu de "Titre" sous le marqueur lorsque celui-ci est survolé par la souris */
var marqueur = new GMarker(point,{title:Titre});
/* Création d'un nouveau marqueur nommé "marqueurzoom" ancré sur le point nommé "point" */
var marqueurzoom = new GMarker(point);
/* ValZoom = ValeurDuZoom */
var ValZoom = ValeurDuZoom;
/* Ajout d'un observateur d'événement au marqueur nommé "marqueur" */
/* L'événement observé est "click". */
/* Lorsqu'un clic sera détecté sur le marqueur nommé "marqueur", le code contenu à l'intérieur de function(){...code à exécuter...} sera exécuté */
GEvent.addListener(marqueur, 'click', function() {
/* Efface tous les marqueurs présents sur la carte nommée "CarteZoom" */
CarteZoom.clearOverlays();
/* La carte nommée "CarteZoom" est centrée sur le point auquel est ancré le marqueur nommé "marqueurzoom", avec un niveau de zoom égal à "ValZoom" */
CarteZoom.setCenter(marqueurzoom.getPoint(),ValZoom);
/* Ajout du marqueur nommé "marqueurzoom" sur la carte nommée "CarteZoom" */
CarteZoom.addOverlay(marqueurzoom);
/* Ouvre l'info-bulle liée au marqueur nommé "marqueurzoom", puis affiche à l'intérieur le contenu de "TexteAuFormatHTML" */
marqueurzoom.openInfoWindowHtml(TexteAuFormatHTML, {maxWidth:160});
});
/* Ajout d'un observateur d'événement au marqueur nommé "marqueurzoom" */
/* L'événement observé est "click". */
/* Lorsqu'un clic sera détecté sur le marqueur nommé "marqueurzoom", le code contenu à l'intérieur de function(){...code à exécuter...} sera exécuté */
GEvent.addListener(marqueurzoom, 'click', function() {
/* Ouvre l'info-bulle liée au marqueur nommé "marqueurzoom", puis affiche à l'intérieur le contenu de "TexteAuFormatHTML" */
marqueurzoom.openInfoWindowHtml(TexteAuFormatHTML, {maxWidth:160});
});
/* Retourne marqueur */
return marqueur;
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
</script>
<style type="text/css">
<!--
#contmap {
position:relative;
width:100%;
height:400px;
z-index:2;
}
#EmplacementDeMaCarte {
float: left;
width: 50%;
height: 400px;
border: none;
}
#EmplacementDeCarteZoom {
float: right;
width: 50%;
height: 400px;
border: none;
}
-->
</style>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<div id="contmap">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de la -->
<!-- balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<div id="EmplacementDeMaCarte"></div>
<!-- La carte nommée "CarteZoom", va venir s'afficher à l' intérieur de la -->
<!-- balise <div> ayant pour identifiant id="EmplacementDeCarteZoom". -->
<div id="EmplacementDeCarteZoom"></div>
</div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
L'exemple s'appuie sur trois marqueurs prédéfinis. Il est tout à fait possible de les extraire d'un fichier xml , json ou d'une base de données.
