Api Google Maps 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

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=Insérez_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=Insérez_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.