Api Google Maps flèche Controle flèche Créer un bouton GOverviewMapControl - Mini-carte Non déployée initialement .

COMMENT CRÉER UN CONTRÔLE
GOverviewMapControl - google.maps.OverviewMapControl
MINI CARTE NON DÉPLOYÉE INITIALEMENT

Article créé le : 08/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 cette mini-carte afin qu'elle soit initialement rétractée

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

Masquer la mini-carte par défaut

Par défaut, lorsqu'on utilise GOverviewMapControl ou google.maps.OverviewMapControl la mini-carte venant s'afficher en bas à droite de la carte principale est forcément déployée.

Ici le but rechercher est de masquer par défaut ce contrôle, c'est à dire qu'initialement, la mini-carte ne doit pas apparaître déployée.

Pour ce cela, nous allons utiliser une astuce. Il s'agit en fait d'afficher en bas à droite de la carte principale un petit bouton identique à celui de la mini-carte lorsque celle-ci est rétractée :

Cliquez ici pour afficher la mini-carte

Une fois que l'on aura cliqué sur ce bouton, on le masque et on active GOverviewMapControl ou google.maps.OverviewMapControl dans la carte principale.

Carte

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;
  • /* url : chemin vers l'image représentant le mini bouton devant apparaître en bas à droite de la carte */
  • var url = "http://www.monsite.fr/repertoire/images/ajoutcontrole.gif";
  •  
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* Création du bouton contenant l'image (fléche pour déployer la mini-carte) : Début */
  • function ImageControle() {}
  • ImageControle.prototype = new google.maps.Control();
  • ImageControle.prototype.initialize = function(maCarte) {
  • /* On créé un nouvel élément nommé "miniBouton" : il s'agit d'une balise image <img/> */
  • /* On obtient donc : <image /> */
  • var miniBouton = document.createElement("img");
  • /* On définit les attributs de cet élément : */
  • /* La source (attribut "scr") de cette image sera "url" définit au début du script */
  • /* On obtient donc : <image src="http://www.monsite.fr/repertoire/images/ajoutcontrole.gif" /> */
  • miniBouton.setAttribute("src", url);
  • /* L'attribut "alt" permet d'afficher "Cliquez ici pour afficher la mini-carte" au cas où l'image ne s'affiche pas */
  • /* On obtient donc : <image src="http://www.monsite.fr/repertoire/images/ajoutcontrole.gif" alt="Cliquez ici pour afficher la mini-carte" /> */
  • miniBouton.setAttribute("alt", "Cliquez ici pour afficher la mini-carte");
  • /* L'attribut "id" attribue l'identifiant "imagecontrole" à notre balise <img /> */
  • /* On obtient donc : <image src="http://www.monsite.fr/repertoire/images/ajoutcontrole.gif" alt="Cliquez ici pour afficher la mini-carte" id="imagecontrole" /> */
  • miniBouton.setAttribute("id", "imagecontrole");
  • /* Défini les propriétés CSS */
  • this.setButtonStyle_(miniBouton);
  • /* Ajoute un observateur d'événement à "miniBouton" */
  • /* L'événement observé est le "click" */
  • /* En cas de "click" sur "miniBouton" on appelle la fonction ajoutControle()*/
  • google.maps.Event.addDomListener(miniBouton, "click", function() {
  • ajoutControle();
  • });
  • /* Ajoute "miniBouton" à la carte nommée "maCarte" */
  • maCarte.getContainer().appendChild(miniBouton);
  • return miniBouton;
  • }
  • /* Permet d'ancrer le contrôle en bas à droite de la carte */
  • /* Avec une marge verticale et horizontale de zéro pixel */
  • ImageControle.prototype.getDefaultPosition = function() {
  • return new google.maps.ControlPosition(G_ANCHOR_BOTTOM_RIGHT, new google.maps.Size(0, 0));
  • }
  • /* Permet de définir les propriétés CSS de ImageControle */
  • ImageControle.prototype.setButtonStyle_ = function(button) {
  • button.style.width = "15px";
  • button.style.height = "15px";
  • button.style.textDecoration = "none";
  • button.style.cursor = "pointer";
  • }
  • /* Création du bouton contenant l'image (fléche pour déployer la mini-carte) : Fin */
  •  
  • /* ... 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);
  • /* ... Le contrôle nommé "controleMiniCarte" est ajouté à la carte nommée "maCarte" ... */
  • maCarte.addControl(new ImageControle());
  • }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');
  • }
  • }
  • /* Fonction ajoutControle() */
  • function ajoutControle(){
  • /* On masque la balise ayant pour identifiant id = "imagecontrole" */
  • /* Il s'agit en fait de la balise image <img/> qui contient l'image */
  • /* initiale sur laquelle on clique pour faire apparaître la mini-carte */
  • document.getElementById("imagecontrole").style.visibility="hidden";
  • /* On créé un nouveau contôle nommé "controleMiniCarte" permettant d'afficher */
  • /* en bas à droite de la carte principale une mini-carte de 300 X 200 pixels */
  • controleMiniCarte = new google.maps.OverviewMapControl(new google.maps.Size(300,200));
  • /* Le type de carte du contôle nommé "controleMiniCarte" est fixé à RELIEF (G_PHYSICAL_MAP) */
  • controleMiniCarte.setMapType(G_PHYSICAL_MAP);
  • /* On ajoute le contôle nommé "controleMiniCarte" à la carte principale nommée "maCarte" */
  • maCarte.addControl(controleMiniCarte);
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • </script>
  • <style type="text/css">
  • <!--
  • .cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
  • -->
  • </style>
  • </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>
  • <div class="cadre">Insertion d'une mini-carte déployable en bas à droite de la carte principale. Celle-ci est rétractée par défaut.<br /><br />
  • Cliquez sur la petite flèche <img src="http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/159/ajoutcontrole.gif" alt="Flèche pour agrandir / rétrécir la mini-carte" /> pour la déployer.<br /><br />
  • <a href="javascript:controleMiniCarte.hide()" title="Masquer la mini-carte">Masquer</a> - <a href="javascript:controleMiniCarte.show()" title="Afficher la mini-carte">Afficher</a>
  • </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 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;
  • /* url : chemin vers l'image représentant le mini bouton devant apparaître en bas à droite de la carte */
  • var url = "http://www.monsite.fr/repertoire/images/ajoutcontrole.gif";
  •  
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* Création du bouton contenant l'image (fléche pour déployer la mini-carte) : Début */
  • function ImageControle() {}
  • ImageControle.prototype = new GControl();
  • ImageControle.prototype.initialize = function(maCarte) {
  • /* On créé un nouvel élément nommé "miniBouton" : il s'agit d'une balise image <img/> */
  • /* On obtient donc : <image /> */
  • var miniBouton = document.createElement("img");
  • /* On définit les attributs de cet élément : */
  • /* La source (attribut "scr") de cette image sera "url" définit au début du script */
  • /* On obtient donc : <image src="http://www.monsite.fr/repertoire/images/ajoutcontrole.gif" /> */
  • miniBouton.setAttribute("src", url);
  • /* L'attribut "alt" permet d'afficher "Cliquez ici pour afficher la mini-carte" au cas où l'image ne s'affiche pas */
  • /* On obtient donc : <image src="http://www.monsite.fr/repertoire/images/ajoutcontrole.gif" alt="Cliquez ici pour afficher la mini-carte" /> */
  • miniBouton.setAttribute("alt", "Cliquez ici pour afficher la mini-carte");
  • /* L'attribut "id" attribue l'identifiant "imagecontrole" à notre balise <img /> */
  • /* On obtient donc : <image src="http://www.monsite.fr/repertoire/images/ajoutcontrole.gif" alt="Cliquez ici pour afficher la mini-carte" id="imagecontrole" /> */
  • miniBouton.setAttribute("id", "imagecontrole");
  • /* Défini les propriétés CSS */
  • this.setButtonStyle_(miniBouton);
  • /* Ajoute un observateur d'événement à "miniBouton" */
  • /* L'événement observé est le "click" */
  • /* En cas de "click" sur "miniBouton" on appelle la fonction ajoutControle()*/
  • GEvent.addDomListener(miniBouton, "click", function() {
  • ajoutControle();
  • });
  • /* Ajoute "miniBouton" à la carte nommée "maCarte" */
  • maCarte.getContainer().appendChild(miniBouton);
  • return miniBouton;
  • }
  • /* Permet d'ancrer le contrôle en bas à droite de la carte */
  • /* Avec une marge verticale et horizontale de zéro pixel */
  • ImageControle.prototype.getDefaultPosition = function() {
  • return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0));
  • }
  • /* Permet de définir les propriétés CSS de ImageControle */
  • ImageControle.prototype.setButtonStyle_ = function(button) {
  • button.style.width = "15px";
  • button.style.height = "15px";
  • button.style.textDecoration = "none";
  • button.style.cursor = "pointer";
  • }
  • /* Création du bouton contenant l'image (fléche pour déployer la mini-carte) : Fin */
  •  
  • /* ... 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);
  • /* ... Le contrôle nommé "controleMiniCarte" est ajouté à la carte nommée "maCarte" ... */
  • maCarte.addControl(new ImageControle());
  • }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');
  • }
  • }
  • function ajoutControle(){
  • /* On masque la balise ayant pour identifiant id = "imagecontrole" */
  • /* Il s'agit en fait de la balise image <img/> qui contient l'image */
  • /* initiale sur laquelle on clique pour faire apparaître la mini-carte */
  • document.getElementById("imagecontrole").style.visibility="hidden";
  • /* On créé un nouveau contôle nommé "controleMiniCarte" permettant d'afficher */
  • /* en bas à droite de la carte principale une mini-carte de 300 X 200 pixels */
  • controleMiniCarte = new GOverviewMapControl(new GSize(300,200));
  • /* Le type de carte du contôle nommé "controleMiniCarte" est fixé à RELIEF (G_PHYSICAL_MAP) */
  • controleMiniCarte.setMapType(G_PHYSICAL_MAP);
  • /* On ajoute le contôle nommé "controleMiniCarte" à la carte principale nommée "maCarte" */
  • maCarte.addControl(controleMiniCarte);
  • }
  • </script>
  • <style type="text/css">
  • <!--
  • .cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
  • -->
  • </style>
  • </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>
  • <div class="cadre">Insertion d'une mini-carte déployable en bas à droite de la carte principale. Celle-ci est rétractée par défaut.<br /><br />
  • Cliquez sur la petite flèche <img src="http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/159/ajoutcontrole.gif" alt="Flèche pour agrandir / rétrécir la mini-carte" /> pour la déployer.<br /><br />
  • <a href="javascript:controleMiniCarte.hide()" title="Masquer la mini-carte">Masquer</a> - <a href="javascript:controleMiniCarte.show()" title="Afficher la mini-carte">Afficher</a>
  • </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)

Attention :

Repère N° 1 Repère N° 1 : Modifiez le code afin d'indiquer la bonne url.

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.