Api Google Maps Version 2
Controle
GETSIZE GETZOOM GETCENTER GETBOUNDS

Api Google Maps Version 2  flèche Controle  flèche Récupérer les paramètres de la carte : getSize getZoom getCenter getBounds - Taille Zoom Centre Visibilité.

GETSIZE GETZOOM GETCENTER GETBOUNDS

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/10/2008
 

Présentation

Il est possible de connaître, à tout instant, les caractéristiques d'une carte à l'aide de :

  • getSize()
  • getZoom()
  • getCenter()
  • getBounds()
getSize() : Description et Exemple
Retourne les dimensions (Largeur x Hauteur en pixels) de la carte.
var dim = maCarte.getSize(); (710, 300)
getZoom() : Description et Exemple
Retourne le niveau de zoom de la carte (0 à 17 voire plus selon les régions)
var zoom = maCarte.getZoom(); 13
getCenter() : Description et Exemple
Retourne les coordonnées (Latitude - Longitude) du point central de la carte
var centre = maCarte.getCenter(); (47.32524, 1.069965)
getBounds() : Description et Exemple
Retourne la visibilité de la carte, c'est à dire le coordonnées du coin supérieur gauche et inférieur droit de la carte
var visi = maCarte.getBounds();
((47.30775389901867, 1.0090255737304688), (47.342661389645016, 1.1309051513671875))

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

  • appelée "maCarte",
  • située dans une balise <div> ayant pour identifiant id="EmplacementDeMacarte",
  • de 740 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),
  • et avec un zoom de 13.

Toute modification au niveau :

  • du type de carte,
  • du zoom,
  • de la Latitude/Longitude du centre de la carte,
  • de la visibilité de la carte,

sera détectée et affichée instantanément dans un tableau situé sous la carte.

Carte


: Type de carte
: Dimensions L x l
: Niveau de Zoom
: Lat Long Centre
: Visibilité

Code

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 ma première carte</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">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaratin des variables globales */
var maCarte;
var typeCarte;
var tailleCarte;
var zoomCarte;
var centreCarte;
var boundsCarte;
 
/* 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 balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
/* ... Cette carte comporte 5 types de cartes : Relief - Plan - Mixte - Satellite - 3D Earth ... */
maCarte = new google.maps.Map2(document.getElementById('EmplacementDeMaCarte'), {mapTypes:[G_PHYSICAL_MAP,G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP,G_SATELLITE_3D_MAP]});
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);
/* ... Ajout, à la carte nommée "maCarte", du contrôle GLargeMapControl : Grand Déplacement et zoom ... */
maCarte.addControl(new google.maps.LargeMapControl());
/* ... Ajout, à la carte nommée "maCarte", du contrôle GMenuMapTypeControl : Menu déroulant pour sélectionner le type de carte ... */
maCarte.addControl(new google.maps.MenuMapTypeControl());
 
/* ... Ajout, à la carte nommée "maCarte", d'un observateur d'événement ... */
/* ... L'événement observé est "maptypechanged", c'est à dire le changement de type de carte ... */
google.maps.Event.addListener(maCarte, 'maptypechanged', function() {
/* ... Appel de la fonction affiche() ... */
	affiche();
	})
/* ... Ajout, à la carte nommée "maCarte", d'un observateur d'événement ... */
/* ... L'événement observé est "move", c'est à dire le déplacement de la carte ... */
google.maps.Event.addListener(maCarte, 'move', function() {
/* ... Appel de la fonction affiche() ... */
	affiche();
	})
/* ... Appel de la fonction affiche() ... */
affiche();
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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 affiche() */
function affiche(){
/* ... newType : Type actuel de la carte nommée "maCarte" ... */
	newType = maCarte.getCurrentMapType();
/* ... newTaille : Taille actuelle de la carte nommée "maCarte" ... */
	newTaille = maCarte.getSize();
/* ... newZoom : Niveau de zoom actuel de la carte nommée "maCarte" ... */
	newZoom = maCarte.getZoom();
/* ... newCentre : Coordonnées du centre actuel de la carte nommée "maCarte" ... */
	newCentre = maCarte.getCenter();
/* ... newBounds : Visibilité actuelle de la carte nommée "maCarte" ... */
	newBounds = maCarte.getBounds();
/* ... Si "typeCarte" est différent de "newType" ... */
	if(typeCarte != newType){
/* ... Si newType == G_SATELLITE_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Satellite" ... */
		if (newType == G_SATELLITE_MAP) {document.getElementById('TypeDeCarte').value = 'Satellite';} 
/* ... Si newType == G_NORMAL_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Plan" ... */
		if (newType == G_NORMAL_MAP) {document.getElementById('TypeDeCarte').value = 'Plan';} 
/* ... Si newType == G_HYBRID_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Mixte" ... */
		if (newType == G_HYBRID_MAP) {document.getElementById('TypeDeCarte').value = 'Mixte';}
/* ... Si newType == G_PHYSICAL_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Relief" ... */
		if (newType == G_PHYSICAL_MAP) {document.getElementById('TypeDeCarte').value = 'Relief';}
/* ... Si newType == G_SATELLITE_3D_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "3D Earth" ... */
		if (newType == G_SATELLITE_3D_MAP) {document.getElementById('TypeDeCarte').value = '3D Earth';}
/* ... la balise <input> ayant pour identifiant id="TypeDeCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('TypeDeCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="TypeDeCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'TypeDeCarte\').style.background=\'#e7e3d7\';',1000);
/* ... typeCarte = newType ... */
		typeCarte = newType;
	}
/* ... Si "tailleCarte" est différent de "newTaille" ... */
	if (tailleCarte != newTaille){
/* ... On affiche dans la balise <input> ayant pour identifiant id="DimensionsDeLaCarte" la nouvelle taille de la carte : newTaille ... */
		document.getElementById('DimensionsDeLaCarte').value = newTaille;
/* ... la balise <input> ayant pour identifiant id="DimensionsDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('DimensionsDeLaCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="DimensionsDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'DimensionsDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... tailleCarte = newTaille ... */
		tailleCarte = newTaille;
	}
/* ... Si "zoomCarte" est différent de "newZoom" ... */
	if (zoomCarte != newZoom){
/* ... On affiche dans la balise <input> ayant pour identifiant id="NiveauDeZoomDeLaCarte" le nouveau niveau de zoom de la carte : newZoom ... */
		document.getElementById('NiveauDeZoomDeLaCarte').value = newZoom;
/* ... la balise <input> ayant pour identifiant id="NiveauDeZoomDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('NiveauDeZoomDeLaCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="NiveauDeZoomDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'NiveauDeZoomDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... zoomCarte = newZoom ... */
		zoomCarte = newZoom;
	}
/* ... Si "centreCarte" est différent de "newCentre" ... */
	if (centreCarte != newCentre){
/* ... On affiche dans la balise <input> ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte" les nouvelles coordonnées du centre de la carte : newCentre ... */
		document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value = newCentre;
/* ... la balise <input> ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').style.background='#AAE5A4';
/* ... On affiche dans la balise <input> ayant pour identifiant id="VisibiliteDeLaCarte" la nouvelle visibilité de la carte : newBounds ... */
		document.getElementById('VisibiliteDeLaCarte').value = newBounds;
/* ... la balise <input> ayant pour identifiant id="VisibiliteDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('VisibiliteDeLaCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'LatitudeLongitudeDuCentreDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="VisibiliteDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'VisibiliteDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... centreCarte = newCentre ... */
		centreCarte = newCentre;
	}
	
}
 
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
form#paramCarte {margin: 0; padding:0; width: 100%; border: 1px solid #000;}
form#paramCarte input {border: 1px solid #000; 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 id="pied">
	<form action="#" id="paramCarte">
		<input type="text" id="TypeDeCarte" size="90" /> : Type de carte<br />
		<input type="text" id="DimensionsDeLaCarte" size="90" /> : Dimensions L x l<br />
		<input type="text" id="NiveauDeZoomDeLaCarte" size="90" /> : Niveau de Zoom<br />
		<input type="text" id="LatitudeLongitudeDuCentreDeLaCarte" size="90" /> : Lat Long Centre<br />
		<input type="text" id="VisibiliteDeLaCarte" size="90" /> : Visibilité<br />
	</form>
</div>
</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 ma première carte</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">
//<![CDATA[
/* Déclaratin des variables globales */
var maCarte;
var typeCarte;
var tailleCarte;
var zoomCarte;
var centreCarte;
var boundsCarte;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
/* ... Cette carte comporte 5 types de cartes : Relief - Plan - Mixte - Satellite - 3D Earth ... */
maCarte = new GMap2(document.getElementById('EmplacementDeMaCarte'), {mapTypes:[G_PHYSICAL_MAP,G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP,G_SATELLITE_3D_MAP]});
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.341571, 0.514233), 13);
/* ... Ajout, à la carte nommée "maCarte", du contrôle GLargeMapControl : Grand Déplacement et zoom ... */
maCarte.addControl(new GLargeMapControl());
/* ... Ajout, à la carte nommée "maCarte", du contrôle GMenuMapTypeControl : Menu déroulant pour sélectionner le type de carte ... */
maCarte.addControl(new GMenuMapTypeControl());
/* ... Ajout, à la carte nommée "maCarte", d'un observateur d'événement ... */
/* ... L'événement observé est "maptypechanged", c'est à dire le changement de type de carte ... */
GEvent.addListener(maCarte, 'maptypechanged', function() {
/* ... Appel de la fonction affiche() ... */
	affiche();
	})
/* ... Ajout, à la carte nommée "maCarte", d'un observateur d'événement ... */
/* ... L'événement observé est "move", c'est à dire le déplacement de la carte ... */
GEvent.addListener(maCarte, 'move', function() {
/* ... Appel de la fonction affiche() ... */
	affiche();
	})
/* ... Appel de la fonction affiche() ... */
affiche();
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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 affiche() */
function affiche(){
/* ... newType : Type actuel de la carte nommée "maCarte" ... */
	newType = maCarte.getCurrentMapType();
/* ... newTaille : Taille actuelle de la carte nommée "maCarte" ... */
	newTaille = maCarte.getSize();
/* ... newZoom : Niveau de zoom actuel de la carte nommée "maCarte" ... */
	newZoom = maCarte.getZoom();
/* ... newCentre : Coordonnées du centre actuel de la carte nommée "maCarte" ... */
	newCentre = maCarte.getCenter();
/* ... newBounds : Visibilité actuelle de la carte nommée "maCarte" ... */
	newBounds = maCarte.getBounds();
/* ... Si "typeCarte" est différent de "newType" ... */
	if(typeCarte != newType){
/* ... Si newType == G_SATELLITE_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Satellite" ... */
		if (newType == G_SATELLITE_MAP) {document.getElementById('TypeDeCarte').value = 'Satellite';} 
/* ... Si newType == G_NORMAL_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Plan" ... */
		if (newType == G_NORMAL_MAP) {document.getElementById('TypeDeCarte').value = 'Plan';} 
/* ... Si newType == G_HYBRID_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Mixte" ... */
		if (newType == G_HYBRID_MAP) {document.getElementById('TypeDeCarte').value = 'Mixte';}
/* ... Si newType == G_PHYSICAL_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "Relief" ... */
		if (newType == G_PHYSICAL_MAP) {document.getElementById('TypeDeCarte').value = 'Relief';}
/* ... Si newType == G_SATELLITE_3D_MAP alors on affiche dans la balise <input> ayant pour identifiant id="TypeDeCarte" le mot "3D Earth" ... */
		if (newType == G_SATELLITE_3D_MAP) {document.getElementById('TypeDeCarte').value = '3D Earth';}
/* ... la balise <input> ayant pour identifiant id="TypeDeCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('TypeDeCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="TypeDeCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'TypeDeCarte\').style.background=\'#e7e3d7\';',1000);
/* ... typeCarte = newType ... */
		typeCarte = newType;
	}
/* ... Si "tailleCarte" est différent de "newTaille" ... */
	if (tailleCarte != newTaille){
/* ... On affiche dans la balise <input> ayant pour identifiant id="DimensionsDeLaCarte" la nouvelle taille de la carte : newTaille ... */
		document.getElementById('DimensionsDeLaCarte').value = newTaille;
/* ... la balise <input> ayant pour identifiant id="DimensionsDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('DimensionsDeLaCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="DimensionsDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'DimensionsDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... tailleCarte = newTaille ... */
		tailleCarte = newTaille;
	}
/* ... Si "zoomCarte" est différent de "newZoom" ... */
	if (zoomCarte != newZoom){
/* ... On affiche dans la balise <input> ayant pour identifiant id="NiveauDeZoomDeLaCarte" le nouveau niveau de zoom de la carte : newZoom ... */
		document.getElementById('NiveauDeZoomDeLaCarte').value = newZoom;
/* ... la balise <input> ayant pour identifiant id="NiveauDeZoomDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('NiveauDeZoomDeLaCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="NiveauDeZoomDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'NiveauDeZoomDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... zoomCarte = newZoom ... */
		zoomCarte = newZoom;
	}
/* ... Si "centreCarte" est différent de "newCentre" ... */
	if (centreCarte != newCentre){
/* ... On affiche dans la balise <input> ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte" les nouvelles coordonnées du centre de la carte : newCentre ... */
		document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value = newCentre;
/* ... la balise <input> ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').style.background='#AAE5A4';
/* ... On affiche dans la balise <input> ayant pour identifiant id="VisibiliteDeLaCarte" la nouvelle visibilité de la carte : newBounds ... */
		document.getElementById('VisibiliteDeLaCarte').value = newBounds;
/* ... la balise <input> ayant pour identifiant id="VisibiliteDeLaCarte" adopte la couleur "#AAE5A4" en couleur de fond ... */
		document.getElementById('VisibiliteDeLaCarte').style.background='#AAE5A4';
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'LatitudeLongitudeDuCentreDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... Puis au bout d'un délai d'une seconde, la balise <input> ayant pour identifiant id="VisibiliteDeLaCarte" adopte la couleur "#e7e3d7" en couleur de fond  ... */
		setTimeout('document.getElementById(\'VisibiliteDeLaCarte\').style.background=\'#e7e3d7\';',1000);
/* ... centreCarte = newCentre ... */
		centreCarte = newCentre;
	}
	
}
 
//]]>
</script>
<style type="text/css">
<!--
form#paramCarte {margin: 0; padding:0; width: 100%; border: 1px solid #000;}
form#paramCarte input {border: 1px solid #000; 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 id="pied">
	<form action="#" id="paramCarte">
		<input type="text" id="TypeDeCarte" size="90" /> : Type de carte<br />
		<input type="text" id="DimensionsDeLaCarte" size="90" /> : Dimensions L x l<br />
		<input type="text" id="NiveauDeZoomDeLaCarte" size="90" /> : Niveau de Zoom<br />
		<input type="text" id="LatitudeLongitudeDuCentreDeLaCarte" size="90" /> : Lat Long Centre<br />
		<input type="text" id="VisibiliteDeLaCarte" size="90" /> : Visibilité<br />
	</form>
</div>
</body>
</html>

Remarque(s)

La ligne Repère N° 1 Repère N° 1 N'oubliez pas de remplacer Votre_Clef_API_Ici par la clé API que google maps vous a fourni pour votre site.

 

Pour le type de carte, on est obligé de comparer "newType" à chaque type de carte possible Repère N° 2 à Repère N° 2 ou Repère N° 2 à Repère N° 2 pour la carte nommée "maCarte", et , en fonction du résultat, de fixer une valeur en conséquence à la balise <input /> ayant pour identifiant id="TypeDeCarte".


<input type="text" id="TypeDeCarte" size="90" value=""/> : Type de carte<br />

 

La ligne Repère N° 3 Repère N° 3 document.getElementById("DimensionsDeLaCarte").value = newTaille;

signifie que la balise ayant pour identifiant id="DimensionsDeLaCarte", située à la ligne Repère N° 7 Repère N° 7


<input type="text" id="DimensionsDeLaCarte" size="90" value="" /> : Dimension de la carte<br />

va hériter de la valeur retournée par maCarte.getZoom() , c'est à dire la taille actuelle de la carte.

 

La ligne Repère N° 4 Repère N° 4 document.getElementById("NiveauDeZoomDeLaCarte").value = newZoom;

signifie que la balise ayant pour identifiant id="NiveauDeZoomDeLaCarte", située à la ligne Repère N° 8 Repère N° 8


<input type="text" id="NiveauDeZoomDeLaCarte" size="90" value="" /> : Niveau de Zoom<br />

va hériter de la valeur retournée par maCarte.getZoom() , c'est à dire le niveau de zoom actuel.

 

La ligne Repère N° 5 Repère N° 5 document.getElementById("LatitudeLongitudeDuCentreDeLaCarte").value = newCentre;

signifie que la balise ayant pour identifiant id="LatitudeLongitudeDuCentreDeLaCarte", située à la ligne Repère N° 9 Repère N° 9


<input type="text" id="LatitudeLongitudeDuCentreDeLaCarte" size="90" value="" /> : Lat Long Centre<br /> : Lat Long du centre<br />

va hériter de la valeur retournée par maCarte.getCenter() , c'est à dire la Latitude et la Longitude du centre de la carte actuelle.

 

La ligne Repère N° 6 Repère N° 6 document.getElementById("VisibiliteDeLaCarte").value = newBounds;

signifie que la balise ayant pour identifiant id="VisibiliteDeLaCarte", située à la ligne Repère N° 10 Repère N° 10


<input type="text" id="VisibiliteDeLaCarte" size="90" value=""/> : Visibilité<br />

va hériter de la valeur retournée par maCarte.getBounds() , c'est à dire la Visibilité de la carte actuelle.

 

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