Api Google Maps flèche Controle flèche Créer un bouton GMapTypeControl - Sélection du type de carte à l'aide de boutons - Emplacement par défaut ou personnalisé.

COMMENT CRÉER UN CONTRÔLE
GMapTypeControl - google.maps.MapTypeControl
EMPLACEMENT PAR DÉFAUT- EMPLACEMENT PERSONNALISÉ

Article créé le : 30/12/2008
 

Présentation

Parmi tous les contrôles que vous pouvez insérer dans votre carte, grâce à l'API Google Maps, figure GMapTypeControl (ou google.maps.MapTypeControl).

Son aspect graphique est le suivant :

Aspect Descriptif
bouton controle GMapTypeControl

Par défaut, ce contrôle se présente sous la forme de trois boutons placés les uns à côté des autres : [Plan] [Satellite] [Mixte].

Le type de la carte par défaut est équivalent au type indiqué par le bouton le plus à gauche, soit, dans ce cas [Plan].

Les caractères, du bouton correspondant au type de carte affiché, sont en gras

Par défaut, ce contrôle s'affiche en haut à droite de la carte.

GMapTypeControl - google.maps.MapTypeControl

Pour insérer ce contrôle dans votre carte, il vous suffit , après avoir créé votre carte, de respecter la régle suivante pour écrire votre code :

nomDeLaCarte.addControl(new leTypeDeControleAAjouter);

Exemple :


...

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));

maCarte.addControl(new GMapTypeControl());

maCarte.setCenter(new GLatLng(47.389517,0.688705),13);

...

Ou si vous utilisez Google AJAX API loader :

Exemple :


...

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));

maCarte.addControl(new google.maps.MapTypeControl());

maCarte.setCenter(new google.maps.LatLng(47.389517,0.688705),13);

...

Carte avec GMapTypeControl - google.maps.MapTypeControl (par défaut)

Code : google.maps.MapTypeControl - Affichage par défaut Avec Google Ajax API Loader

  • <?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=Insérez_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"});
  • /* 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" ... */
  • var MaCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new google.maps.LatLng(47.389517, 0.688705), 13);
  • /* ... Affichage sur la carte nommée "MaCarte" d'un contrôle "google.maps.MapTypeControl" avec ses caractéristiques par défaut */
  • MaCarte.addControl(new google.maps.MapTypeControl());
  • }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>
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" 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>

Code : GMapTypeControl - Affichage par défaut Sans Google Ajax API Loader

  • <?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 src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte ayant pour nom "MaCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new GLatLng(47.389517, 0.688705), 13);
  • /* ... Affichage sur la carte nommée "MaCarte" d'un contrôle "GMapTypeControl" avec ses caractéristiques par défaut */
  • MaCarte.addControl(new GMapTypeControl());
  • }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()">
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" 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>

Modifier l'emplacement de GMapTypeControl - google.maps.MapTypeControl

Pour modifier l'emplacement du contôle GMapTypeControl (ou google.maps.MapTypeControl) sur la carte, il vous suffit d'utiliser GControlPosition (ou google.maps.ControlPosition) et GSize (ou google.maps.Size), puis de respecter la régle suivante pour écrire votre code :

nomDeLaCarte.addControl(new GMapTypeControl, new GControlPosition(AncrageDuControle, new GSize(margeHorizontale,margeVerticale)));

Ou si vous utilisez Google AJAX API loader :

nomDeLaCarte.addControl(new google.maps.MapTypeControl, new google.maps.ControlPosition(AncrageDuControle, new google.maps.Size(margeHorizontale,margeVerticale)));

AncrageDuControle : peut prendre 4 valeurs différentes :

  • G_ANCHOR_TOP_RIGHT : Le contrôle sera ancré par rapport au coin situé en haut à droite de la carte,
  • G_ANCHOR_TOP_LEFT : Le contrôle sera ancré par rapport au coin situé en haut à gauche de la carte,
  • G_ANCHOR_BOTTOM_RIGHT : Le contrôle sera ancré par rapport au coin situé en bas à droite de la carte,
  • G_ANCHOR_BOTTOM_LEFT : Le contrôle sera ancré par rapport au coin situé en bas à gauche de la carte.

margeHorizontale et margeVerticale fixent la taille, en pixel(s), des marges à appliquer par rapport au point d'ancrage.

Exemple :

On souhaite que le contrôle GMapTypeControl (ou google.maps.MapTypeControl) soit positionné, avec une marge horizontale de 20 pixels et une marge verticale de 40 pixels, par rapport au coin inférieur gauche de la carte.


...

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));

maCarte.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(20,40)));

maCarte.setCenter(new GLatLng(47.389517,0.688705),13);

...

Exemple avec Google AJAX API loader :


...

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));

maCarte.addControl(new google.maps.MapTypeControl(), new google.maps.ControlPosition(G_ANCHOR_BOTTOM_LEFT, new google.maps.Size(20,40)));

maCarte.setCenter(new google.maps.LatLng(47.389517,0.688705),13);

...

Carte avec GMapTypeControl - google.maps.MapTypeControl (emplacement modifié)

Code : google.maps.MapTypeControl - Emplacement modifié Avec Google Ajax API Loader

  • <?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=Insérez_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"});
  • /* 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" ... */
  • var MaCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new google.maps.LatLng(47.389517, 0.688705), 13);
  • /* ... Affichage sur la carte nommée "MaCarte" d'un contrôle "google.maps.MapTypeControl" avec les caractéristiques suivantes : */
  • /* ... Le contrôle sera situé dans le coin inférieur gauche de la carte, à 20 pixels du bord vertical et 40 pixels du bord horizontal. */
  • MaCarte.addControl(new google.maps.MapTypeControl(), new google.maps.ControlPosition(G_ANCHOR_BOTTOM_LEFT, new google.maps.Size(20,40)));
  • }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>
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" 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>

Code : GMapTypeControl - Emplacement modifié Sans Google Ajax API Loader

  • <?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 src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte ayant pour nom "MaCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new GLatLng(47.389517, 0.688705), 13);
  • /* ... Affichage sur la carte nommée "MaCarte" d'un contrôle "GMapTypeControl" avec les caractéristiques suivantes : */
  • /* ... Le contrôle sera situé dans le coin inférieur gauche de la carte, à 20 pixels du bord vertical et 40 pixels du bord horizontal. */
  • MaCarte.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(20,40)));
  • }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()">
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" 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>

Affichage court des types de carte - Option : useShortNames

Il existe une option vous permettant d'afficher le nom du type de carte sous sa forme courte (ou abrégée).

Affichage long du type de carte ( Affichage par défaut ) :

  • GMapTypeControl({useShortNames:false})
  • GMapTypeControl()

ou avec Google AJAX API loader :

  • google.maps.MapTypeControl({useShortNames:false})
  • google.maps.MapTypeControl()

Remarque : Les deux notations ci-dessus affichent exactement le même type de contrôle.

Affichage court ou abrégé du type de carte :

  • GMapTypeControl({useShortNames:true})

ou avec Google AJAX API loader :

  • google.maps.MapTypeControl({useShortNames:true})
LES DIFFERENTS TYPES D'AFFICHAGE
Type de carte : Nom long (Affichage par défaut) Type de carte : Nom court ou abrégé
bouton controle GMapTypeControl nom long
bouton controle GMapTypeControl nom court

Exemple :


...

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));

maCarte.addControl(new GMapTypeControl({useShortNames:true}));

...

Ou si vous utilisez Google AJAX API loader :

Exemple :


...

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));

maCarte.addControl(new google.maps.MapTypeControl({useShortNames:true}));

...

Modifier le contenu du contrôle

Il existe 5 types d'affichage possible :

LES DIFFERENTS TYPES DE CARTES
Plan Satellite Mixte Relief 3D Earth
Image Google Earth
G_NORMAL_MAP G_SATELLITE_MAP G_HYBRID_MAP G_PHYSICAL_MAP G_SATELLITE_3D_MAP

Pour créer un contrôle contenant cinq boutons, types de cartes, affichés dans l'ordre suivant :

Ordre Type Option Résultat
1 Satellite G_SATELLITE_MAP
controle GMapTypeControl personnalisé
2 Mixte G_HYBRID_MAP
3 Plan G_NORMAL_MAP
4 Relief G_PHYSICAL_MAP
5 3D Earth G_SATELLITE_3D_MAP

il suffit d'ajouter à GMap2 (ou google.maps.Map2) l'option mapTypes en précisant, entre crochets, le nom et l'ordre des différents types de cartes que l'on souhaite intégrer.

Le type de carte affiché par défaut est equivalent au premier type de carte défini dans les boutons, soit dans notre exemple : Satellite.


...

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_SATELLITE_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP,G_SATELLITE_3D_MAP]});

maCarte.addControl(new GMapTypeControl());

...

Ou si vous utilisez Google AJAX API loader :


...

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_SATELLITE_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP,G_SATELLITE_3D_MAP]});

maCarte.addControl(new google.maps.MapTypeControl());

...

Code : Avec Google Ajax API Loader

  • <?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=Insérez_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"});
  • /* 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" ... */
  • var MaCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_SATELLITE_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP,G_SATELLITE_3D_MAP]});
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new google.maps.LatLng(47.389517, 0.688705), 13);
  • /* ... Affiche sur la carte nommée "MaCarte" une série de boutons permettant de sélectionner les différents types de cartes disponibles */
  • MaCarte.addControl(new google.maps.MapTypeControl());
  • }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>
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" 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>

Code : Sans Google Ajax API Loader

  • <?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=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • /* 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" ... */
  • var MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_SATELLITE_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP,G_SATELLITE_3D_MAP]});
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new GLatLng(47.389517, 0.688705), 13);
  • /* ... Affiche sur la carte nommée "MaCarte" une série de boutons permettant de sélectionner les différents types de cartes disponibles */
  • MaCarte.addControl(new GMapTypeControl());
  • }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()">
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" 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>