Api Google Maps - Carte - Le type de carte affiché varie en fonction du zoom - getZoom()

LE TYPE DE CARTE VARIE EN FONCTION DU NIVEAU DE ZOOM

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.

Article créé le : 16/12/2008

Présentation

Le but, ici, est d'adapter automatiquement le type de la carte en fonction du niveau de zoom, sans aucune intervention de la part de votre visiteur.

Pour cela, nous allons utiliser .getZoom() qui permet de connaître le niveau de zoom de la carte.

Exemple :

Pour que la variable "zoomActuel" soit égale au niveau de zoom en cours de la carte nommée "maCarte" :

var zoomActuel = maCarte.getZoom()

Puis, on utilise .setMapType afin de modifier le type de la carte

Exemple :

Pour que, le type de la carte nommée "maCarte" soit "Satellite" il suffit d'écrire :

maCarte.setMapType(G_SATELLITE_MAP)

TYPE DE CARTE EN FONCTION DU NIVEAU DE ZOOM
PLAGE DE ZOOM	TYPE DE CARTE
0 à 5	SATELLITE
6 à 9	HYBRIDE
10 à 13	RELIEF
14 et +	PLAN

Sous la carte, on va indiquer, de façon explicite :

le niveau de zoom,
le type de carte affiché.

Niveau de Zoom	13
Type de Carte	Satellite

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>Google Maps Api - Carte - Le type de carte affiché varie en fonction du zoom - getZoom() - setMapType()</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
google.load("maps","2");
var typeCarte;
var maCarte;
var niveauZoom;
function initialize() {
if (google.maps.BrowserIsCompatible()) {
/* ... 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 google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.38882, la Longitude 0.689392, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.38882,0.689392), 13);
/* ... Affichage de la carte nommée "maCarte" au format "SATELLITE" */
maCarte.setMapType(G_SATELLITE_MAP);
/* ... Affichage du grand contrôle (Zoom et fléches pour le déplacement de la carte) */
maCarte.addControl(new google.maps.LargeMapControl());
/* ... Un observateur d'événement est ajouté à la carte nommée "maCarte"... */
/* ... L'évenement détecté est "zoomend" (Détecte la fin du zoom sur la carte)... */
/* ... Lorsque la fin du zoom est détectée, la fonction située entre les {} sera alors executée ... */
google.maps.Event.addListener(maCarte, "zoomend", function(){
	/* ... La variable "niveauZoom" prend la valeur actuelle du niveau de zoom de la carte nommée "maCarte" ... */
	niveauZoom = maCarte.getZoom();
	/* ... Si le niveau de zoom affiché est strictement inférieur à 6 alors la carte nommée "maCarte" sera affichée au format "SATELLITE" : G_SATELLITE_MAP */
	if(niveauZoom<6){maCarte.setMapType(G_SATELLITE_MAP); typeCarte="Satellite";}
	/* ... Si le niveau de zoom affiché est supérieur ou égal à 6 et strictement inférieur à 10 alors la carte nommée "maCarte" sera affichée au format "MIXTE" : G_HYBRID_MAP */
	else if(niveauZoom>=6 && niveauZoom<10){maCarte.setMapType(G_HYBRID_MAP); typeCarte="Hybride"}
	/* ... Si le niveau de zoom affiché est supérieur ou égal à 10 et strictement inférieur à 14 alors la carte nommée "maCarte" sera affichée au format "RELIEF" : G_PHYSICAL_MAP */
	else if(niveauZoom>=10 && niveauZoom<14){maCarte.setMapType(G_PHYSICAL_MAP); typeCarte="Relief";}
	/* ... Sinon la carte nommée "maCarte" sera affichée au format "PLAN" : G_NORMAL_MAP */
	else{maCarte.setMapType(G_NORMAL_MAP); typeCarte="Plan";}
	/* ... le niveau de zoom de la carte (= niveauZoom) va s'afficher dans la balise <div> ayant pour identifiant id="AfficheNiveauZoom" */
	document.getElementById("AfficheNiveauZoom").innerHTML = niveauZoom;
	/* ... le type de carte (= typeCarte) va s'afficher dans la balise <div> ayant pour identifiant id="AfficheTypeCarte" */
	document.getElementById("AfficheTypeCarte").innerHTML = typeCarte;
});
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
google.setOnLoadCallback(initialize);
</script>
<style type="text/css">
<!--
table.tablotexte{margin:0;margin-top:2em;padding:0;width:100%;border-collapse:collapse;border:1px solid #303030;font:1em Arial,Helvetica,sans-serif;	background-color: #FFFFFF;}
table.tablotexte th{border:1px solid #303030;text-align:center;padding:5px;background:#d3cdb8;color:#513a0b;}
table.tablotexte td{border:1px solid #303030;text-align:justify;padding:5px;vertical-align:top;}
-->
</style>
</head>
 
<body>
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<table class="tablotexte">
<tr>
<th>Niveau de Zoom</th>
<td><div id="AfficheNiveauZoom">13</div></td>
</tr>
<tr>
<th>Type de Carte</th>
<td><div id="AfficheTypeCarte">Satellite</div></td>
</tr>
</table>
<!-- 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>Google Maps Api - Carte - Le type de carte affiché varie en fonction du zoom - getZoom() - setMapType()</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">
var typeCarte;
var maCarte;
var niveauZoom;
function initialize() {
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.38882, la Longitude 0.689392, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.38882,0.689392), 13);
/* ... Affichage de la carte nommée "maCarte" au format "SATELLITE" */
maCarte.setMapType(G_SATELLITE_MAP);
/* ... Affichage du grand contrôle (Zoom et fléches pour le déplacement de la carte) */
maCarte.addControl(new GLargeMapControl());
/* ... Un observateur d'événement est ajouté à la carte nommée "maCarte"... */
/* ... L'évenement détecté est "zoomend" (Détecte la fin du zoom sur la carte)... */
/* ... Lorsque la fin du zoom est détectée, la fonction située entre les {} sera alors executée ... */
GEvent.addListener(maCarte, "zoomend", function(){
	/* ... La variable "niveauZoom" prend la valeur actuelle du niveau de zoom de la carte nommée "maCarte" ... */
	niveauZoom = maCarte.getZoom();
	/* ... Si le niveau de zoom affiché est strictement inférieur à 6 alors la carte nommée "maCarte" sera affichée au format "SATELLITE" : G_SATELLITE_MAP */
	if(niveauZoom<6){maCarte.setMapType(G_SATELLITE_MAP); typeCarte="Satellite";}
	/* ... Si le niveau de zoom affiché est supérieur ou égal à 6 et strictement inférieur à 10 alors la carte nommée "maCarte" sera affichée au format "MIXTE" : G_HYBRID_MAP */
	else if(niveauZoom>=6 && niveauZoom<10){maCarte.setMapType(G_HYBRID_MAP); typeCarte="Hybride"}
	/* ... Si le niveau de zoom affiché est supérieur ou égal à 10 et strictement inférieur à 14 alors la carte nommée "maCarte" sera affichée au format "RELIEF" : G_PHYSICAL_MAP */
	else if(niveauZoom>=10 && niveauZoom<14){maCarte.setMapType(G_PHYSICAL_MAP); typeCarte="Relief";}
	/* ... Sinon la carte nommée "maCarte" sera affichée au format "PLAN" : G_NORMAL_MAP */
	else{maCarte.setMapType(G_NORMAL_MAP); typeCarte="Plan";}
	/* ... le niveau de zoom de la carte (= niveauZoom) va s'afficher dans la balise <div> ayant pour identifiant id="AfficheNiveauZoom" */
	document.getElementById("AfficheNiveauZoom").innerHTML = niveauZoom;
	/* ... le type de carte (= typeCarte) va s'afficher dans la balise <div> ayant pour identifiant id="AfficheTypeCarte" */
	document.getElementById("AfficheTypeCarte").innerHTML = typeCarte;
});
}else{
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
</script>
<style type="text/css">
<!--
table.tablotexte{margin:0;margin-top:2em;padding:0;width:100%;border-collapse:collapse;border:1px solid #303030;font:1em Arial,Helvetica,sans-serif;	background-color: #FFFFFF;}
table.tablotexte th{border:1px solid #303030;text-align:center;padding:5px;background:#d3cdb8;color:#513a0b;}
table.tablotexte td{border:1px solid #303030;text-align:justify;padding:5px;vertical-align:top;}
-->
</style>
</head>
 
<body onload="initialize()" onunload="GUnload()">
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<table class="tablotexte">
<tr>
<th>Niveau de Zoom</th>
<td><div id="AfficheNiveauZoom">13</div></td>
</tr>
<tr>
<th>Type de Carte</th>
<td><div id="AfficheTypeCarte">Satellite</div></td>
</tr>
</table>
<!-- 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>

Navigation

Forum d'aide

Forum d'aide Google Maps

Traduction - Translate

Géo Web Actu

La modernisation de la défense

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Référence en Français

La classe " Essentielle "

GMap2

Les classes de " Base "

Les classes " Événement "

Les classes " Contrôle "

Les classes " Couche "

Les classes " Service "

API Google Maps - API Google Earth - Fichiers KML KMZ - Aide Didacticiel Documentation Exemple Tutoriels Trucs et Astuces en Français sur TouraineVerte.com
Formation et tutoriels sur les cartes API Google Maps | Formation et tutoriels sur les cartes API Google Earth | Formation et tutoriels sur les Fichiers KML KMZ
Développeur freelance auto-entrepreneur carte Google Maps Earth API | http://www.TouraineVerte.com | © 2010 - Plan du site | fadamaps37@touraineverte.com

Api Google Maps Version 2CarteLE TYPE DE CARTE VARIE EN FONCTION DU NIVEAU DE ZOOM