Api Google Maps flèche Controle flèche Créer un bouton GOverviewMapControl - Mini-carte - Personnaliser la taille le type - Liens Afficher Masquer .

COMMENT CRÉER UN CONTRÔLE
GOverviewMapControl - google.maps.OverviewMapControl
PERSONNALISER LA TAILLE LE TYPE - INSERTION DE LIENS

Article créé le : 12/05/2009
 

Présentation

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

Celui-ci vous permet d'afficher une mini carte déployable / rétractable affichée, par défaut, en bas à droite de la carte principale.

Cette mini-carte permet de géolocaliser la carte principale.

Nous allons voir ici, comment personnaliser :

  • son type : Relief, Plan, Satellite, Mixte,
  • sa taille,

Nous verrons également, comment insérer dans le texte de votre page des liens Afficher ou Masquer permettant d'interargir sur la mini-carte.

Pour en savoir plus sur les paramètres par défaut de GOverviewMapControl (ou google.maps.OverviewMapControl) veuillez lire cet article :

Api Google Maps - Controle - Créer un bouton GOverviewMapControl - Mini-carte - Par défaut

Modifier la taille de la mini-carte

Pour modifier la taille de la mini-carte de façon à ce qu'elle mesure, par exemple, 300 pixels de largeur et 200 pixels de hauteur, il suffit de procéder comme suit :

Exemple :


maCarte.addControl(new GOverviewMapControl(new GSize(300, 200)));

Autre écriture possible :


var controleMiniCarte = new GOverviewMapControl(new GSize(300, 200));


maCarte.addControl(controleMiniCarte);

Ou si vous utilisez Google AJAX API loader :


maCarte.addControl(new google.maps.OverviewMapControl(new google.maps.Size(300, 200)));

Autre écriture possible :


var controleMiniCarte = new google.maps.OverviewMapControl(new Size(300, 200));


maCarte.addControl(controleMiniCarte);

Modifier le type de carte de la mini-carte

Par défaut, le type de la mini-carte est "Plan". Pour modifier ce type, il suffit de procéder comme suit :

Exemple : Pour une mini-carte de type "Relief" - G_PHYSICAL_MAP


var controleMiniCarte = new GOverviewMapControl();


controleMiniCarte.setMapType(G_PHYSICAL_MAP);


maCarte.addControl(controleMiniCarte)

Ou si vous utilisez Google AJAX API loader :


var controleMiniCarte = new google.maps.OverviewMapControl());


controleMiniCarte.setMapType(G_PHYSICAL_MAP);


maCarte.addControl(controleMiniCarte);

Exemple : Pour une mini-carte de type "Mixte" - G_HYBRID_MAP


var controleMiniCarte = new GOverviewMapControl();


controleMiniCarte.setMapType(G_HYBRID_MAP);


maCarte.addControl(controleMiniCarte);

Ou si vous utilisez Google AJAX API loader :


var controleMiniCarte = new google.maps.OverviewMapControl();


controleMiniCarte.setMapType(G_HYBRID_MAP);


maCarte.addControl(controleMiniCarte);

Insérer des liens Afficher Masquer la mini-carte

Pour insérer dans le texte de votre page un lien permettant d'afficher ou masquer le mini-carte, il vous suffit d'ajouter le code suivant entre vos balises <body></body> :

Exemple : 


  <a href="javascript:controleMiniCarte.hide()" title="Masquer la mini-carte">Masquer</a> - <a href="javascript:controleMiniCarte.show()" title="Afficher la mini-carte">Afficher</a>

Carte

La carte principale ci-dessus, comporte une mini-carte, dont les caractéristiques sont les suivantes :
Dimensions : 300 pixels X 200 pixels ,
Type : "Relief".
Les deux liens ci-dessous permettent d'afficher ou masquer la mini-carte :
Masquer - Afficher

Codes

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"});
  • /* Déclaration des variables globales */
  • var maCarte;
  • var controleMiniCarte;
  • /* 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.389517, la Longitude 0.688705, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.389517, 0.688705), 13);
  • /* ... Création d'un contrôle nommé "controleMiniCarte" de 300 pixels de large par 200 pixels de haut ... */
  • controleMiniCarte = new google.maps.OverviewMapControl(new google.maps.Size(300,200));
  • /* ... Le type de carte du contrôle nommé "controleMiniCarte" est fixé à "Relief" - G_PHYSICAL_MAP ... */
  • controleMiniCarte.setMapType(G_PHYSICAL_MAP);
  • /* ... Le contrôle nommé "controleMiniCarte" est ajouté à la carte nommée "maCarte" ... */
  • maCarte.addControl(controleMiniCarte);
  • }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: 100%; height: 400px"></div>
  • <a href="javascript:controleMiniCarte.hide()" title="Masquer la mini-carte">Masquer</a> - <a href="javascript:controleMiniCarte.show()" title="Afficher la mini-carte">Afficher</a>
  • <!-- 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 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">
  • /* Déclaration des variables globales */
  • var maCarte;
  • var controleMiniCarte;
  • /* 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" ... */
  • 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);
  • /* ... Création d'un contrôle nommé "controleMiniCarte" de 300 pixels de large par 200 pixels de haut ... */
  • controleMiniCarte = new GOverviewMapControl(new GSize(300,200));
  • /* ... Le type de carte du contrôle nommé "controleMiniCarte" est fixé à "Relief" - G_PHYSICAL_MAP ... */
  • controleMiniCarte.setMapType(G_PHYSICAL_MAP);
  • /* ... Le contrôle nommé "controleMiniCarte" est ajouté à la carte nommée "maCarte" ... */
  • maCarte.addControl(controleMiniCarte);
  • }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: 100%; height: 400px"></div>
  • <a href="javascript:controleMiniCarte.hide()" title="Masquer la mini-carte">Masquer</a> - <a href="javascript:controleMiniCarte.show()" title="Afficher la mini-carte">Afficher</a>
  • <!-- 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)

Attention :

Contrairement aux autres boutons ou contrôles, la mini-carte ne peut être positionnée que dans le coin inférieur droit de la carte.