Api Google Maps flèche Controle flèche Créer un bouton GNavLabelControl - Affiche l'adresse de la vue actuelle de la carte- Emplacement par défaut - Emplacement personnalisé.

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

Article créé le : 27/05/2009
 

Présentation

Depuis la version 2.141, l'API Google Maps vous permet d'insérer un nouveau contrôle, dans votre carte, nommé GNavLabelControl. Son aspect est le suivant :

capture d'écran du bouton GNavLabelControl

Situé, par défaut, dans le coin supérieur droit de la carte, il permet d'afficher, sous forme de liens, l'adresse correspondant à l'emplacement actuel de la carte.

En fonction du niveau de zoom de la carte, l'adresse affichée comportera les informations suivantes :

  • Continent ou Pays,
  • Région,
  • Département,
  • Ville.

Sans action de votre part sur la carte durant plus de dix secondes, le contrôle disparaît automatiquement. Par la suite, toute nouvelle action sur la carte déclenchera sa réapparition.

Si l'emplacement figurant sur la carte est inconnu de Google Maps, le contrôle ne s'affiche pas.

GNavLabelControl

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 GNavLabelControl());

  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.NavLabelControl());

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

  ...

Carte avec GNavLabelControl (par défaut)

A l'aide de votre souris déplacez la carte, zoomez en avant ou en arrière
et observez l'impact sur le contrôle GNavLabelControl.

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 ma 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=Insérez_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()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <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.38975, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.38975,0.688705), 13);
  • /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "NavLabelControl" avec ses caractéristiques par défaut ... */
  • maCarte.addControl(new google.maps.NavLabelControl());
  • /* 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>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 740 pixels de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 740px; 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 ma 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=Insérez_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()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <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.38975, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.38975,0.688705), 13);
  • /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "NavLabelControl" avec ses caractéristiques par défaut ... */
  • maCarte.addControl(new GNavLabelControl());
  • /* 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()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 740 pixels de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 740px; 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 GNavLabelControl

Pour modifier l'emplacement du contôle GNavLabelControl sur la carte, il vous suffit d'utiliser GControlPosition et GSize, puis de respecter la régle suivante pour écrire votre code :


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

Ou si vous utilisez Google AJAX API loader :


  nomDeLaCarte.addControl(new leTypeDeControleAAjouter, 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 GNavLabelControl soit positionné, avec une marge horizontale de 20 pixels et une marge verticale de 40 pixels, par rapport au coin supérieur droit de la carte.


  ...

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

  maCarte.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, 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.LargeMapControl(), new google.maps.ControlPosition(G_ANCHOR_TOP_RIGHT, new google.maps.Size(20,40)));

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

  ...

Carte avec GNavLabelControl (emplacement modifié)

A l'aide de votre souris déplacez la carte, zoomez en avant ou en arrière
et observez l'impact sur le contrôle GNavLabelControl.

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 ma 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=Insérez_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()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <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.38975, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.38975,0.688705), 13);
  • /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "NavLabelControl" situé en haut à gauche de la carte avec une marge horizontale de 65 pixels et verticale de 30 pixels ... */
  • maCarte.addControl(new google.maps.NavLabelControl(), new google.maps.ControlPosition(G_ANCHOR_TOP_LEFT, new google.maps.Size(65,30)));
  •  
  • /* 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>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 740 pixels de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 740px; 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 ma 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=Insérez_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()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <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.38975, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.38975,0.688705), 13);
  • /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "NavLabelControl" situé en haut à gauche de la carte avec une marge horizontale de 65 pixels et verticale de 30 pixels ... */
  • maCarte.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(65,30)));
  •  
  • /* 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()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 740 pixels de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 740px; 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>