|
|
|
|
|
CRÉER SA PREMIÈRE CARTE GOOGLE MAPS (API V3)
 Ci-dessous votre premier script affichant une carte Google Maps en utilisant l'API version 3.
Remarquez que l'on n'utilise plus de clé d'enregistrement
<html>
<head>
<title>Application Google Maps : Ma première carte (API V3)</title>
<!-- Ce meta tag spécifie que la carte sera affichée
à la dimension imposée et de sera pas modifiable par l'utilisateur -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Pointe la bibliothèque google maps V3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function init_map()
{
<!-- Création d'un objet coordonnées -->
var latlng = new google.maps.LatLng(48.85929404029, 2.341461181640);
<!-- Les options de notre carte -->
<!-- - zoom : coéfficient du zoom -->
<!-- - center : centrage de la carte -->
<!-- - mapTypeId : type de carte -->
var myOptions =
{
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
<!-- Création de l'objet carte dans le DIV "my_map" -->
var map = new google.maps.Map(document.getElementById("my_map"), myOptions);
}
</script>
</head>
<!-- Au moment où la page se télécharge la fonction "load()" charge la carte -->
<body onload="init_map()">
<!-- "map" est l'identifiant du calque qui recevra la carte -->
<div id="my_map" style="width: 500px; height: 300px"></div>
</body>
</html>
|
Pour faire votre premier essai, faites un copier/coller du contenu du cadre ci-dessus dans une page vierge de votre Notepad (bloc note).
Sauvez-le en lui donnant une extention ".html" ou "htm".
Téléchargez le fichier vers votre hébergement et visualisez le résultat.
Explications :
La méthode de programmation en API V3 est profondément différente. Plus besoin de faire appel à une clé mais, par contre, on établit un lien vers la bibliothèque V3 en utilisant "<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>".
Dans la fonction "init_maps" sont déclaré : une coordonnée (latlng), les options (myOptions avec l'indice de zoom, le type de carte et le centre) et finalement on génère la carte "my_map". L'usage des options seront vu sur d'autres pages !
"<body onload="init_map()">", au chargement de la page, charge la fonction "init_map()".
"<div id="my_map" style="width: 500px; height: 300px"></div>", est le calque "my_map" qui contiendra la carte Google Maps. C'est ici aussi, que vous allez déterminer la dimmention de la carte avec la valeur des attributs "width" et "height".
Résultat :
|
|
|
|