COMMENT CRÉER UN CONTRÔLE
GOverviewMapControl - google.maps.OverviewMapControl
PRÉSENTATION PAR DÉFAUT
Article créé le : 03/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.
Son aspect graphique est le suivant :
| Aspect | Descriptif | |
|---|---|---|
|
En bleu : Mini-carte ciblant la zone affichée par la carte principale. En rouge : Flèche située en bas à droite permettant d'afficher ou masquer la mini-carte. |
|
GOverviewMapControl - google.maps.OverviewMapControl
Pour insérer ce contrôle il vous suffit , après avoir créé votre carte principale, de respecter la régle suivante pour écrire votre code :
nomDeLaCartePrincipale.addControl(new leTypeDeControleAAjouter);
Exemple :
...
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new GLatLng(47.389517,0.688705),13);
maCarte.addControl(new GOverviewMapControl());
...
Autre écriture possible :
...
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new GLatLng(47.389517,0.688705),13);
var controleMiniCarte = new GOverviewMapControl();
maCarte.addControl(controleMiniCarte);
...
Ou si vous utilisez Google AJAX API loader :
Exemple :
...
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new google.maps.LatLng(47.389517,0.688705),13);
maCarte.addControl(new google.maps.OverviewMapControl());
...
Autre écriture possible :
...
var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new google.maps.LatLng(47.389517,0.688705),13);
var controleMiniCarte = new google.maps.OverviewMapControl();
maCarte.addControl(controleMiniCarte);
...
Carte
Codes
Code : google.maps.OverviewMapControl - 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"});
- /* Déclaration des variables globales */
- var maCarte;
- /* 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);
- /* ... Affichage sur la carte nommée "maCarte" d'un contrôle "google.maps.OverviewMapControl" avec ses caractéristiques par défaut */
- maCarte.addControl(new google.maps.OverviewMapControl());
- }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 : GOverviewMapControl - 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">
- /* 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" - Paramètres par défaut ... */
- controleMiniCarte = new GOverviewMapControl();
- /* ... 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 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)
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.
