MASQUER [ Satellite ] - [ Mixte ] POUR OBTENIR [ Plan ] - [ Relief ]

PRESENTATION

La gestion des boutons [ Plan ] - [ Satellite ] - [ Mixte ] - [ Relief ] se fait à l'aide de l'option mapTypes de GMap2.

G_NORMAL_MAP : correspond au bouton [ Plan ]
G_SATELLITE_MAP : correspond au bouton [ Satellite ]
G_HYBRID_MAP : correspond au bouton [ Mixte ]
G_PHYSICAL_MAP : correspond au bouton [ Relief ]

mapTypes:[G_SATELLITE_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP]

Dans cet exemple, nous allons créer une carte:

appelée "Chenonceau",
située dans une balise <div> ayant pour id ( identifiant ) "EmplacementDeMacarte",
de 710 pixels de large, par 400 pixels de haut,
centrée sur le château de Chenonceau (Latitude : 47.32524, Longitude : 1.069965) en Indre et Loire (37),
avec un zoom de 13
dotée de deux boutons placés dans l'ordre suivant : [ Plan ] - [ Relief ] .

RESULTAT

CODE

   [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   [3] <head>
   [4] <title>Google Maps - Les boutons Plan Carte Satellite Mixte</title>
   [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script>
   [7] <script type="text/javascript">
   [8] //<![CDATA[
   [9] function load() {
  [10] 	if (GBrowserIsCompatible()) {
  [11] 		var Chenonceau = new GMap2(document.getElementById('EmplacementDeMacarte'), {mapTypes:[G_NORMAL_MAP,G_PHYSICAL_MAP]});
  [12] 		Chenonceau.setCenter(new GLatLng(47.32524,1.069965), 13);
  [13] 		Chenonceau.addControl(new GMapTypeControl());
  [14] 	}else{
  [15] 		alert('Dsol, mais votre navigateur n\'est pas compatible avec Google Maps');
  [16] 	}
  [17] }
  [18] //]]>
  [19] </script>
  [20] </head>
  [21] 
  [22] <body onload="load()" onunload="GUnload()">
  [23] <center>
  [24] 	<div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div>
  [25] </center>
  [26] </body>
  [27] </html>

Pour télécharger / copier le code cliquez ici, et n'oubliez pas de remplacer la clef API par la vôtre.

EXPLICATIONS

Ligne [06] :
n'oubliez pas de remplacer Votre_Clef_API_Ici par la clé API que google maps vous a fourni pour votre site.

Ligne [11] :
mapTypes:[G_NORMAL_MAP,G_PHYSICAL_MAP] va forcer l'affichage des boutons en tenant compte de l'odre indiqué entre [], soit : [ Plan ] - [ Relief ].

Ligne [13] :
les boutons sont :

affichés en tenant compte de l'ordre fixé en ligne Ligne [17] ,
positionnés en haut à droite de la carte ( position par défaut de ces boutons ).

REMARQUES

Attention :

L'ordre des boutons est important, car le premier bouton (le plus à gauche ...) va déterminer le type de carte à afficher par défaut.

Exemple :

Dans notre exemple, le premier bouton est [ Plan ]. Par conséquence, la carte affichée par défaut, est une carte "Plan".

Si le premier bouton était [ Mixte ], (Exemple : mapTypes:[G_HYBRID_MAP,G_SATELLITE_MAP]) la carte affichée par défaut, serait la carte "Mixte".