Api Google Maps flèche Controle flèche Créer un bouton ExtLargeMapControl - Déplacement et zoom de la carte grand format - Emplacement par défaut ou personnalisé.

COMMENT CRÉER UN CONTRÔLE
ExtLargeMapControl
EMPLACEMENT PAR DÉFAUT- EMPLACEMENT PERSONNALISÉ

Article créé le : 04/02/2009
 

Présentation

A l'aide du script extlargemapcontrol.js, externe à l'API Google MAps, vous pouvez insérer dans votre carte un contrôle ExtLargeMapControl ( 3D Large Map Control ) dont l'aspect est identique au nouveau bouton que l'on trouve désormais sur Google Maps.

Son aspect graphique est le suivant :

Aspect Descriptif
bouton controle ExtLargeMapControl

En bleu :

4 boutons, assignés au déplacement de la carte dans les 4 directions : Nord, Ouest, Sud, Est.
bouton controle ExtLargeMapControl description

En rouge :

Un bouton, situé au centre des 4 précédents, permettant de replacer la carte dans son état intitial (point central et niveau de zoom).

En vert :

Une "échelle" destinée à faire varier le niveau de zoom.

Par défaut, il s'affiche en haut à gauche de la carte.

ExtLargeMapControl

Pour insérer ce contrôle dans votre carte, il vous suffit :

  • de télécharger le script extlargemapcontrol.js et de l'installer sur votre serveur.
  • d'insérer le script nommé "extlargemapcontrol.js" dans votre page à l'aide de cette ligne de code : 

  <script type="text/javascript" src="http://www.votreserveur.fr/votrerepertoire/script_js/extlargemapcontrol.js"></script>

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

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

  ...

Autre écriture possible :


  ...

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

  var monControle = new ExtLargeMapControl();

  maCarte.addControl(monControle);

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

  ...

Carte avec ExtLargeMapControl (par défaut)

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 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>
  • <!-- Chargement du script permettant l'affichage du contrôle ExtLargeMapControl -->
  • <script type="text/javascript" src="http://www.votreserveur.fr/votrechemin/extlargemapcontrol.js"></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 "GLargeMapControl" avec ses caractéristiques par défaut */
  • MaCarte.addControl(new ExtLargeMapControl());
  • }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 ExtLargeMapControl

Pour modifier l'emplacement du contôle ExtLargeMapControl 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)));

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 ExtLargeMapControl 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 ExtLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(20,40)));

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

  ...

Autre écriture possible :


  ...

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

  var monControle = new ExtLargeMapControl();

  var nouvelEmplacement =  new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(20,40));

  maCarte.addControl(monControle, nouvelEmplacement);

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

  ...

Carte avec ExtLargeMapControl (emplacement modifié)

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 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>
  • <!-- Chargement du script permettant l'affichage du contrôle ExtLargeMapControl -->
  • <script type="text/javascript" src="http://www.votreserveur.fr/votrechemin/extlargemapcontrol.js"></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 "GLargeMapControl" avec ses caractéristiques # suivantes : */
  • /* ... Le contrôle sera situé dans le coin supérieur droit de la carte, à 20 pixels du bord vertical et 40 pixels du bord horizontal. */
  • MaCarte.addControl(new ExtLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, 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>
  •  

Les options ExtLargeMapControl pour modifier la langue

Par défaut, lorsque vous survolez les boutons de ce contrôle avec votre curseur, un titre en anglais apparaît. Pour les afficher en Français, il vous suffit d'utiliser les options de ExtLargeMapControl.

En voici le détail :


  var options = {

    zoomInBtnTitle : "Zoom [+]",

    zoomOutBtnTitle : "Zoom [-]",

    moveNorthBtnTitle : "Déplacer vers le Nord",

    moveSouthBtnTitle : "Déplacer vers le Sud",

    moveEastBtnTitle : "Déplacer vers le Est",

    moveWestBtnTitle : "Déplacer vers l'Ouest",

    homeBtnTitle : "Position initiale"

  };

puis il suffit d'appliquer ces options à ExtLargeMapControl.


  var monControle = new ExtLargeMapControl(options);

  maCarte.addControl(monControle);

Autre écriture possible :


  maCarte.addControl(new ExtLargeMapControl({zoomInBtnTitle : "Zoom [+]", zoomOutBtnTitle : "Zoom [-]", moveNorthBtnTitle : "Déplacer vers le Nord", moveSouthBtnTitle : "Déplacer vers le Sud", moveEastBtnTitle : "Déplacer vers le Est", moveWestBtnTitle : "Déplacer vers l'Ouest", homeBtnTitle : "Position initiale"}));

Carte avec options ExtLargeMapControl : titres des boutons en Français

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 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>
  • <!-- Chargement du script permettant l'affichage du contrôle ExtLargeMapControl -->
  • <script type="text/javascript" src="http://www.votreserveur.fr/votrechemin/extlargemapcontrol.js"></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);
  • /* ... options : options applicables au contrôle "ExtLargeMapControl" ... */
  • /* ... Ces options permettent l'affichage en Français des titres ... */
  • /* ... lorsque l'on passe le curseur sur les différents boutons du contrôle ... */
  • var options = {
  • zoomInBtnTitle : "Zoom [+]",
  • zoomOutBtnTitle : "Zoom [-]",
  • moveNorthBtnTitle : "Déplacer vers le Nord",
  • moveSouthBtnTitle : "Déplacer vers le Sud",
  • moveEastBtnTitle : "Déplacer vers l'Est",
  • moveWestBtnTitle : "Déplacer vers l'Ouest",
  • homeBtnTitle : "Position initiale"
  • };
  • /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "GLargeMapControl" avec les caractéristiques suivantes : */
  • /* ... Le contrôle sera situé dans le coin supérieur droit de la carte, à 20 pixels du bord vertical et 40 pixels du bord horizontal. */
  • maCarte.addControl(new ExtLargeMapControl(options), new GControlPosition(G_ANCHOR_TOP_RIGHT, 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>
  •  

L'option small pour ExtLargeMapControl

Il est également possible de réduire l'affichage de ce contrôle à deux petits boutons permettant de faire varier le niveau de zoom. Pour cela, il vous suffit d'utiliser l'option small de ExtLargeMapControl.

Voici comment faire :


  var option = {

    type : "small"

  };

puis il suffit d'appliquer cette option à ExtLargeMapControl.


  var monControle = new ExtLargeMapControl(option);

  maCarte.addControl(monControle);

Autre écriture possible :


  maCarte.addControl(new ExtLargeMapControl({type : "small"}));

Carte avec l'option small de ExtLargeMapControl

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 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>
  • <!-- Chargement du script permettant l'affichage du contrôle ExtLargeMapControl -->
  • <script type="text/javascript" src="http://www.votreserveur.fr/votrechemin/extlargemapcontrol.js"></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);
  • /* ... option : option applicable au contrôle "ExtLargeMapControl" ... */
  • /* ... L'options "small" permet l'affichage d'un mini-contrôle ne ... */
  • /* ... comportant que deux petits boutons pour régler le niveau de zoom ... */
  • var option = {
  • type : "small"
  • };
  • /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "GLargeMapControl" en tenant compte de l'option "small" ... */
  • maCarte.addControl(new ExtLargeMapControl(option));
  • }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>
  •  

Remarque(s)

N'oubliez pas de changer les lignes suivantes, en insérant vos propres paramètres :

  • Repère N° 1 : Insérez votre clé API ici,
  • Repère N° 2 : Indiquez le chemin sur votre serveur vers le script extlargemapcontrol.js.