1. Introduction à l`API Google Maps

Published on GeoTribu (http://geotribu.net)
Accueil > 1. Introduction à l'API Google Maps
7
22 aoû 2008
1. Introduction à l'API Google Maps
[1]
Fabien [2]
tutoriel [3], Google Maps [4]
Image not found
http://geotribu.net/sites/default/files/Tuto/img/attention_light.jpg
attention_light.jpg
L'API Google Maps
v2 est dépréciée depuis le 19 mai 2010.
Introduction
L'API Google Maps[5] permet d'intégrer une carte semblable àcelle de Google[6]
dans ses pages Web en utilisant un peu de Javascript.
Appel à l'API grâce à la clé
Pour utiliser l'API Google Maps, il est nécessaire d'obtenir une clé gratuite à cette
adresse[7]. Et d'écrire cette ligne dans le de la page HTML qui contiendra la carte
Google Maps :
v=2.x : ici on note la version de l'API utilisée dans notre projet : - 2.x correspond à la
dernière version de l'API - 2.s correspond à la dernière version stable de l'API - 2
correspond à la version courante Détail des changements de l'API :
http://mapki.com/wiki/Changelog [8]
NB : Nous utiliserons par la suite toujours la version courante de l'API afin d'éviter les
mauvaises surprises[9].
Code Javascript de déclaration de la carte
Nous déclarons la fonction initialize() qui sera chargée lors du chargement de la page
Web. Cette fonction contient les instructions afin de déclarer la carte Google Maps. La
structure conditionnelle 'if then else' permet d'alerter l'utilisateur si son navigateur
n'accepte pas le JavaScript grâce à la fonction GBrowserIsCompatible(). Nous
déclarons ensuite l'objet map qui sera affiché dans le bloc dont l'identifiant sera
'map_canvas' de la page HTML :var map = new
GMap2(document.getElementById('map')); et définissons un centre et un niveau
de zoom pour cet objet.map.setCenter(new GLatLng(43.57691664771851,
1.402451992034912),15);
Code HTML
Afin d'afficher la carte, il est nécessaire de déclarer un bloc div qui contiendra la carte :
Et il faut appeler la fonction initialize() lors du chargement de la page : La fonction
GUnload() permet de libérer la mémoire lorsque l'on quitte la page Web.
Code complet
Code :
Démonstration
</p> <a href="http://88.191.142.86/fabien/geotribu/tuto/gmapsv2/tuto1.html[10]" target="_blank">Résultat pleine page</a>
<br/> <h3>Remarques</h3> <hr/>
<ul> <li>Le système de coordonnées dans Google Maps est le
WGS84 (système géodésique du système GPS ) -http://fr.wikipedia.org/wiki/WGS_84[11]
. <li>Le niveau de zoom est généralement défini par un chiffre entre 0 et 18.
Cependant, il est parfois possible d'aller un peu plus loin :
http://maps.google.com/maps?q=15.29854,19.429741&ie=UTF8&amp...[12]
</ul> <br/> <h3>Conclusion</h3>
<hr/> La création d'une simple carte et l'intégration de celle-ci dans une page
Internet est très facile. Cependant dans celle-ci, il n'est possible que de se déplacer - grâce à
la souris, de zoomer d'un level - doucle-clic gauche et de dézommer - double-clic droit. Ces
options sont intégrées par défaut lors de l'appel au constructeur et nous verrons par la suite
comment enrichir l'interface pour pouvoir naviguer dans la carte et comment ajouter des
informations sur cette dernière. Il est possible de développer ses propres applications en
localhost : pour ceci, il faut demander une clé spécifique pour l'adressehttp://locahost/[13]
. <br/> <h3>Liens</h3> <hr/>
<ul> <li>Récupérer une clé Google Maps :
http://code.google.com/apis/maps/signup.html[14] <li>La documentation
complète de l'API Google Maps :
http://code.google.com/intl/es/apis/maps/documentation/reference.html[15]
</ul> <br/> <strong>Auteur : Fabien fabien.goblet [ at ] gmail.com</strong> <br/></div>
Google Maps [16]
Facile [17]
A propos de l'auteur:
Arnaud Vandecasteele
Fervent défenseur de l'Open Source, Arnaud s'est spécialisé dans le développement
d'application cartographiques web. OpenLayers, PostGIS ou encore Django sont autant
d'outils qu'il manipule au quotidien.
S'il n'est pas en face de son ordinateur, vous le retrouverez un GPS à la main en train de
cartographier pour OpenStreetMap, de faire voler son drone ou sur un tatami !
Team GeoTribu
Image not found
Image not found
Image not found
Image not found
Image not found
Image not found
Image not fou
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.png
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.png
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.png
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.pn
http://88.191.142.86/geotribu_d7/./sites/default/public/pub
http://88.191.142.86/geotribu_d7/./si
http://88.191.1
Source URL: http://geotribu.net/node/12
Links:
[1] http://geotribu.net/node/12
[2] http://geotribu.net/user/3
[3] http://geotribu.net/taxonomy/term/19
[4] http://geotribu.net/taxonomy/term/34
[5] http://code.google.com/intl/fr/apis/maps/
[6] http://maps.google.fr/maps?hl=fr&tab=wl
[7] http://code.google.com/intl/fr/apis/maps/signup.html
[8] http://mapki.com/wiki/Changelog
[9] http://www.geotribu.net/node/102
[10] http://88.191.142.86/fabien/geotribu/tuto/gmaps-v2/tuto1.html
[11] http://fr.wikipedia.org/wiki/WGS_84
[12]
http://maps.google.com/maps?q=15.29854,19.429741&ie=UTF8&ll=15.298539,19.429
[13] http://locahost/
[14] http://code.google.com/apis/maps/signup.html
[15] http://code.google.com/intl/es/apis/maps/documentation/reference.html
[16] http://geotribu.net/taxonomy/term/3
[17] http://geotribu.net/taxonomy/term/7