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.
Si vous souhaitez afficher plusieurs cartes sur une même page, il vous suffit d'attibuer un nom, un emplacement et un type de carte pour chaque carte créée.
Prenons l'exemple d'une page contenant 4 cartes nommées respectivement :
Celles-ci seront situées dans 4 emplacements différents :
| "maPremiereCarte" : Elle s'affichera en lieu et place de la balise <div> ayant pour identifiant ( id ) "EmplacementDeMaPremiereCarte" |
|---|
| var maPremiereCarte = new GMap2(document.getElementById("EmplacementDeMaPremiereCarte")); |
| "maSecondeCarte" : Elle s'affichera en lieu et place de la balise <div> ayant pour identifiant id = "EmplacementDeMaSecondeCarte" |
|---|
| var maSecondeCarte = new GMap2(document.getElementById("EmplacementDeMaSecondeCarte")); |
| "maTroisiemeCarte" : Elle s'affichera en lieu et place de la balise <div> ayant pour identifiant id = "EmplacementDeMatroisiemeCarte" |
|---|
| var maTroisiemeCarte = new GMap2(document.getElementById("EmplacementDeMaTroisiemeCarte")); |
| "maQuatriemeCarte" : Elle s'affichera en lieu et place de la balise <div> ayant pour identifiant id = "EmplacementDeMaQuatriemeCarte" |
|---|
| var maQuatriemeCarte = new GMap2(document.getElementById("EmplacementDeMaQuatriemeCarte")); |
Ensuite, il suffit d'attribuer à chaque carte, le type d'affichage que l'on souhaite lui voir appliquer :
| Nom de la Carte | Type d'affichage | Code |
|---|---|---|
| maPremiereCarte | Satellite | maPremiereCarte.setMapType(G_SATELLITE_MAP); |
| maSecondeCarte | Mixte | maSecondeCarte.setMapType(G_HYBRID_MAP); |
| maTroisiemeCarte | Plan | maTroisiemeCarte.setMapType(G_NORMAL_MAP); |
| maQuatriemeCarte | Relief | maQuatriemeCarte.setMapType(G_PHYSICAL_MAP); |
<?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 - Créer sa première carte</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">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ............................ */
/* ... Château de Villandry ... */
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaPremiereCarte" ... */
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaPremiereCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.34064, la Longitude 0.514491, avec un niveau de zoom égal à 17 ... */
maCarte.setCenter(new google.maps.LatLng(47.34064,0.514491), 17);
/* ... Le type de carte de la carte nommée "maCarte" est fixé à Satellite (G_SATELLITE_MAP) ... */
maCarte.setMapType(G_SATELLITE_MAP);
/* ......................... */
/* ... Château de Chinon ... */
/* ... Création d'une nouvelle carte nommée "maSecondeCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaSecondeCarte" ... */
var maSecondeCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaSecondeCarte"));
/* ... La carte nommée "maSecondeCarte" est centrée sur la Latitude 47.168083, la Longitude 0.235884, avec un niveau de zoom égal à 17 ... */
maSecondeCarte.setCenter(new google.maps.LatLng(47.168083,0.235884), 17);
/* ... Le type de carte de la carte nommée "maSecondeCarte" est fixé à Mixte (G_HYBRID_MAP) ... */
maSecondeCarte.setMapType(G_HYBRID_MAP);
/* ........................... */
/* ... Château de Chambord ... */
/* ... Création d'une nouvelle carte nommée "maTroisiemeCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaTroisiemeCarte" ... */
var maTroisiemeCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaTroisiemeCarte"));
/* ... La carte nommée "maTroisiemeCarte" est centrée sur la Latitude 47.61639, la Longitude 0.5168, avec un niveau de zoom égal à 17 ... */
maTroisiemeCarte.setCenter(new google.maps.LatLng(47.61639,1.5168), 17);
/* ... Le type de carte de la carte nommée "maTroisiemeCarte" est fixé à Plan (G_NORMAL_MAP) ... */
maTroisiemeCarte.setMapType(G_NORMAL_MAP);
/* ...................... */
/* ... Château d'Ussé ... */
/* ... Création d'une nouvelle carte nommée "maQuatriemeCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaQuatriemeCarte" ... */
var maQuatriemeCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaQuatriemeCarte"));
/* ... La carte nommée "maQuatriemeCarte" est centrée sur la Latitude 47.249713, la Longitude 0.291116, avec un niveau de zoom égal à 17 ... */
maQuatriemeCarte.setCenter(new google.maps.LatLng(47.249713,0.291116), 17);
/* ... Le type de carte de la carte nommée "maQuatriemeCarte" est fixé à Relief (G_PHYSICAL_MAP) ... */
maQuatriemeCarte.setMapType(G_PHYSICAL_MAP);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
</head>
<body>
<h3>Château de Villandry : Satellite</h3>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaPremiereCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaPremiereCarte" style="width: 100%; height: 400px"></div>
<h3>Château de Chinon : Mixte</h3>
<!-- La carte nommée "maSecondeCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaSecondeCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaSecondeCarte" style="width: 100%; height: 400px"></div>
<h3>Château de Chambord : Plan</h3>
<!-- La carte nommée "maTroisiemeCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaTroisiemeCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaTroisiemeCarte" style="width: 100%; height: 400px"></div>
<h3>Château d'Ussé : Relief</h3>
<!-- La carte nommée "maQuatriemeCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaQuatriemeCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaQuatriemeCarte" style="width: 100%; height: 400px"></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 - Créer sa première carte</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ............................ */
/* ... Château de Villandry ... */
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaPremiereCarte" ... */
var maCarte = new GMap2(document.getElementById("EmplacementDeMaPremiereCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.34064, la Longitude 0.514491, avec un niveau de zoom égal à 17 ... */
maCarte.setCenter(new GLatLng(47.34064,0.514491), 17);
/* ... Le type de carte de la carte nommée "maCarte" est fixé à Satellite (G_SATELLITE_MAP) ... */
maCarte.setMapType(G_SATELLITE_MAP);
/* ......................... */
/* ... Château de Chinon ... */
/* ... Création d'une nouvelle carte nommée "maSecondeCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaSecondeCarte" ... */
var maSecondeCarte = new GMap2(document.getElementById("EmplacementDeMaSecondeCarte"));
/* ... La carte nommée "maSecondeCarte" est centrée sur la Latitude 47.168083, la Longitude 0.235884, avec un niveau de zoom égal à 17 ... */
maSecondeCarte.setCenter(new GLatLng(47.168083,0.235884), 17);
/* ... Le type de carte de la carte nommée "maSecondeCarte" est fixé à Mixte (G_HYBRID_MAP) ... */
maSecondeCarte.setMapType(G_HYBRID_MAP);
/* ........................... */
/* ... Château de Chambord ... */
/* ... Création d'une nouvelle carte nommée "maTroisiemeCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaTroisiemeCarte" ... */
var maTroisiemeCarte = new GMap2(document.getElementById("EmplacementDeMaTroisiemeCarte"));
/* ... La carte nommée "maTroisiemeCarte" est centrée sur la Latitude 47.61639, la Longitude 0.5168, avec un niveau de zoom égal à 17 ... */
maTroisiemeCarte.setCenter(new GLatLng(47.61639,1.5168), 17);
/* ... Le type de carte de la carte nommée "maTroisiemeCarte" est fixé à Plan (G_NORMAL_MAP) ... */
maTroisiemeCarte.setMapType(G_NORMAL_MAP);
/* ...................... */
/* ... Château d'Ussé ... */
/* ... Création d'une nouvelle carte nommée "maQuatriemeCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaQuatriemeCarte" ... */
var maQuatriemeCarte = new GMap2(document.getElementById("EmplacementDeMaQuatriemeCarte"));
/* ... La carte nommée "maQuatriemeCarte" est centrée sur la Latitude 47.249713, la Longitude 0.291116, avec un niveau de zoom égal à 17 ... */
maQuatriemeCarte.setCenter(new GLatLng(47.249713,0.291116), 17);
/* ... Le type de carte de la carte nommée "maQuatriemeCarte" est fixé à Relief (G_PHYSICAL_MAP) ... */
maQuatriemeCarte.setMapType(G_PHYSICAL_MAP);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
//]]>
</script>
</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()">
<h3>Château de Villandry : Satellite</h3>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaPremiereCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaPremiereCarte" style="width: 100%; height: 400px"></div>
<h3>Château de Chinon : Mixte</h3>
<!-- La carte nommée "maSecondeCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaSecondeCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaSecondeCarte" style="width: 100%; height: 400px"></div>
<h3>Château de Chambord : Plan</h3>
<!-- La carte nommée "maTroisiemeCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaTroisiemeCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaTroisiemeCarte" style="width: 100%; height: 400px"></div>
<h3>Château d'Ussé : Relief</h3>
<!-- La carte nommée "maQuatriemeCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaQuatriemeCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaQuatriemeCarte" style="width: 100%; height: 400px"></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>
