Il est possible de connaitre, à tout instant, les paramètres d'une carte (dans cet exemple la carte s'appelle "Chenonceau" ) :
getSize() : indique les dimensions (Largeur x Hauteur en pixels) de la carte.
Exemple :
Chenonceau.getSize()
retourne : (710, 300)
getZoom() : indique le niveau de zoom de la carte (0 à 17).
Exemple :
Chenonceau.getZoom()
retourne : 13
getCenter() : indique les coordonnées (Latitude - Longitude) du point central de la carte.
Exemple :
Chenonceau.getCenter()
retourne : (47.32524, 1.069965)
getBounds() : indique la visibilité de la carte
Exemple :
Chenonceau.getBounds()
retourne : ((47.30775389901867, 1.0090255737304688), (47.342661389645016, 1.1309051513671875))
Dans cet exemple, nous allons créer une carte :
Toute modification au niveau :
sera détectée et affichée instantanément dans un tableau situé sous la carte.
[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 - getSize getZoom getCenter getBounds : paramètres de la carte</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] [11] if (GBrowserIsCompatible()) { [12] [13] var Chenonceau = new GMap2(document.getElementById('EmplacementDeMacarte')); [14] Chenonceau.setCenter(new GLatLng(47.32524,1.069965), 13); [15] Chenonceau.addControl(new GLargeMapControl()); [16] Chenonceau.addControl(new GMapTypeControl()); [17] [18] var myMapType = Chenonceau.getCurrentMapType(); [19] if (myMapType == G_SATELLITE_TYPE) {document.getElementById('TypeDeCarte').value = 'Satellite';} [20] if (myMapType == G_MAP_TYPE) {document.getElementById('TypeDeCarte').value = 'Plan/Carte';} [21] if (myMapType == G_HYBRID_TYPE) {document.getElementById('TypeDeCarte').value = 'Mixte';} [22] document.getElementById('DimensionsDeLaCarte').value = Chenonceau.getSize(); [23] document.getElementById('NiveauDeZoomDeLaCarte').value = Chenonceau.getZoom(); [24] var nivozoom = document.getElementById('NiveauDeZoomDeLaCarte').value; [25] document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value = Chenonceau.getCenter(); [26] var coordcentre = document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value; [27] document.getElementById('VisibiliteDeLaCarte').value = Chenonceau.getBounds(); [28] [29] GEvent.addListener(Chenonceau, 'move', function() { [30] var NewmyMapType = Chenonceau.getCurrentMapType(); [31] if(NewmyMapType != myMapType){ [32] if (NewmyMapType == G_SATELLITE_TYPE) {document.getElementById('TypeDeCarte').value = 'Satellite';} [33] if (NewmyMapType == G_MAP_TYPE) {document.getElementById('TypeDeCarte').value = 'Plan/Carte';} [34] if (NewmyMapType == G_HYBRID_TYPE) {document.getElementById('TypeDeCarte').value = 'Mixte';} [35] document.getElementById('TypeDeCarte').style.background='#AAE5A4'; [36] setTimeout('document.getElementById(\'TypeDeCarte\').style.background=\'#eee\';',1000); [37] myMapType = NewmyMapType; [38] } [39] document.getElementById('DimensionsDeLaCarte').value = Chenonceau.getSize(); [40] document.getElementById('NiveauDeZoomDeLaCarte').value = Chenonceau.getZoom(); [41] var newnivozoom = document.getElementById('NiveauDeZoomDeLaCarte').value; [42] if (nivozoom != newnivozoom){ [43] document.getElementById('NiveauDeZoomDeLaCarte').value = Chenonceau.getZoom(); [44] document.getElementById('NiveauDeZoomDeLaCarte').style.background='#AAE5A4'; [45] setTimeout('document.getElementById(\'NiveauDeZoomDeLaCarte\').style.background=\'#eee\';',1000); [46] nivozoom = newnivozoom; [47] } [48] document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value = Chenonceau.getCenter(); [49] var newcoordcentre = document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value; [50] if (coordcentre != newcoordcentre){ [51] document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').value = Chenonceau.getCenter(); [52] document.getElementById('LatitudeLongitudeDuCentreDeLaCarte').style.background='#AAE5A4'; [53] document.getElementById('VisibiliteDeLaCarte').style.background='#AAE5A4'; [54] setTimeout('document.getElementById(\'LatitudeLongitudeDuCentreDeLaCarte\').style.background=\'#eee\';',1000); [55] setTimeout('document.getElementById(\'VisibiliteDeLaCarte\').style.background=\'#eee\';',1000); [56] coordcentre = newcoordcentre; [57] } [58] document.getElementById('VisibiliteDeLaCarte').value = Chenonceau.getBounds(); [59] }); [60] } [61] } [62] [63] //]]> [64] </script> [65] <style type='text/css' media='all'> [66] form {margin: 0; padding:0; border: 1px solid #B8D6C2; width: 740px; height: auto; text-align: left;} [67] input {border: 1px solid #fff; background-color: #eee;} [68] </style> [69] </head> [70] [71] <body onload="load()" onunload="GUnload()"> [72] <center> [73] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [74] <br /> [75] <div align="center"> [76] <form action="#"> [77] <input type="text" value="Plan/Carte" id="TypeDeCarte" size="90" /> : Type de carte<br /> [78] <input type="text" value="(710, 400)" id="DimensionsDeLaCarte" size="90" /> : Dimensions de la carte<br /> [79] <input type="text" value="13" id="NiveauDeZoomDeLaCarte" size="90" /> : Niveau de Zoom<br /> [80] <input type="text" value="(47.32524, 1.069965)" id="LatitudeLongitudeDuCentreDeLaCarte" size="90" /> : Lat Long du centre<br /> [81] <input type="text" value="((47.30193374117882, 1.0090255737304688), (47.348477062112785, 1.1309051513671875))" id="VisibiliteDeLaCarte" size="90" /> : Visibilité de la carte<br /> [82] </form> [83] </div> [84] </center> [85] </body> [86] </html>
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 [23] : document.getElementById("NiveauDeZoomDeLaCarte").value = Chenonceau.getZoom();
L'élément ayant pour Id "NiveauDeZoomDeLaCarte" ( il se trouve à la Ligne [78] : <input type="text" value="13" id="NiveauDeZoomDeLaCarte" size="90" /> : Niveau de Zoom<br /> ) va hériter de la valeur retournée par Chenonceau.getZoom() ( c'est à dire le niveau de zoom actuel )
Ligne [25] : document.getElementById("LatitudeLongitudeDuCentreDeLaCarte").value = Chenonceau.getCenter();
L'élément ayant pour Id "LatitudeLongitudeDuCentreDeLaCarte" ( il se trouve à la Ligne [79] : <input type="text" value="(47.32524, 1.069965)" id="LatitudeLongitudeDuCentreDeLaCarte" size="90" /> : Lat Long du centre<br /> ) va hériter de la valeur retournée par Chenonceau.getCenter() ( c'est à dire la Latitude et la Longitude du centre de la carte actuelle )
Ligne [27] : document.getElementById("VisibiliteDeLaCarte").value = Chenonceau.getBounds();
L'élément ayant pour Id "VisibiliteDeLaCarte" ( il se trouve à la Ligne [80] : <input type="text" value="(47.32524, 1.069965)" id="VisibiliteDeLaCarte" size="90" /> : Visibilité de la carte<br /> ) va hériter de la valeur retournée par Chenonceau.getBounds() ( c'est à dire la Visibilité de la carte actuelle )
Néant