Controle
Créer un bouton GOverviewMapControl - Mini-carte Non déployée initialement
.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
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
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 :
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.
<?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=Inserez_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>
<?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=Inserez_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>
Attention :
: 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.
