API-V2-MAPS.com



Comment utiliser les API's Google Maps, tutoriels Google Maps, cartographie Google Maps


Image
image
image
image





 

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 :





 

image


image
Informations :
"Google" et "Google Maps" sont des noms déposés par la société Google, Inc. de Mountain View (Comté de Santa Clara, Californie, USA).















image
  © Copyright 2008© VDC
  Tout droits réservés
  Date de création : 01/06/2008
  Dernière mise à jour : 02/06/2009