tuto

Intégrer une carte Google Map

Aujourd’hui nous allons voir comment intégrer une carte Google Map dans vos pages web. Démo Source Pour ce tutoriel j’utilise la bibliothèque jQuery. Elle me permet de récupérer dynamiquement les coordonées à utiliser. Cela vous permet d’utiliser le même code pour plusieurs pages. Par exemple, imaginons que votre site ait pour sujet la critique de restaurant et qu’il permette la création de « fiche » de restaurant comportant les coordonnées du restaurant …

 

Aujourd’hui nous allons voir comment intégrer une carte Google Map dans vos pages web.

Pour ce tutoriel j’utilise la bibliothèque jQuery. Elle me permet de récupérer dynamiquement les coordonées à utiliser. Cela vous permet d’utiliser le même code pour plusieurs pages. Par exemple, imaginons que votre site ait pour sujet la critique de restaurant et qu’il permette la création de « fiche » de restaurant comportant les coordonnées du restaurant et une carte pour visualiser son emplacement.

1. Code HTML

<!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" xml:lang="fr" lang="fr">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
      <meta name="author" content="Snoupix"/>
      <script src="http://maps.google.com/VOTRE CLE GOOGLE" ></script>
      <script src="http://www.google.com/ET LE RESTE DU CODE" ></script>
      <script src="jquery-1.3.2.min.js" type="text/javascript" ></script>
      <script src="scriptGoogleMap.js" type="text/javascript" ></script>
   </head>
   <body>
      <div id="global">
         <h1>Houaa, Google m'a trouvé</h1>
         <div id="coordonnees">
            <h2>Mes coordonnés</h2>
            Nom : <b id="nom">Snoupix</b>
            Adresse : <b id="adresse">35 rue d'hérouville, Caen, France</b>
         </div>
         <div id="map"></div>
      </div>
   </body>
</html>

Quelques mots sur le code HTML. Tout d’abord notez bien les « id » nom et adresse. C’est grâce à ces id que nous pourrons récupérer les valeur d’adresse et de nom grâce à jQuery. De plus c’est dans la div id= »map » que la carte sera intégrée.

Pour finir, le plus inportant. Vous devez vous inscrire gratuitement à l’API Google Map pour avoir une clé de carte personnelle. Allez à cette adresse http://code.google.com/intl/fr/apis/maps/signup.html, inscrivez vous et récupérez la clé Google que vous devrez intégrer dans les balises de votre fichier HTML.

2. Code javascript

//initilaisation des variables
var map = null;
var geocoder = null;

function load() {
   if (GBrowserIsCompatible()) {
      //nouvel objet de type Map
      map = new GMap2(document.getElementById("map"));

      //centralisa de la carte initiale.
      //Emplacement fait en fonction des code Longitude et Latitude
      map.setCenter(new GLatLng(48.9, 2.3), 13);

      //affichage des contrôleurs de zoom, ...
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());

      //nouvel Obget de géocodeur
      geocoder = new GClientGeocoder();
   }

   //récupération des valeurs des champs d'adresse et nom
   var adresse = $('#adresse').text();
   var nom = $('#nom').text();

   if (geocoder) {
      geocoder.getLatLng(
         adresse,function(point) {
            //si l'adresse n'existe pas on l'affiche
            if (!point) {
               alert(adresse + " introuvable");
            } else {
               //centrer la carte sur les coordonnées.
               //le chiffre 13 correspond au zoom de visualisation de la carte
               map.setCenter(point, 13);

               //initialisation du pointer (flêche rouge)
               var marker = new GMarker(point);
               map.addOverlay(marker);

               //création des informations affichées sur le pointeur
               marker.openInfoWindowHtml(nom +""+adresse);
            }
         }
      );
   }
}

// appelle de la fonction d'initailisation et de chargement de la page dès que google est ok.
google.setOnLoadCallback(load)

Ce code est très simple. N’essayez pas de faire des correspondances avec javascript, ce code est du pûr Google uniquement comprit par les scripts Google.

 

Maintenant à vous de jouer, et n’hésitez pas à bidouiller ce code pour l’adapter à vos projets.

10 commentaires

S'abonner au RSS des commentaires
  1. chavardez
    Posté le 10/09/2011 à 12h02

    Bonjour,

    Comment insérer une variable smarty dans le js en lieu et place de la commune?

    merci

  2. hop
    Posté le 29/03/2010 à 17h45

    slt je vé crée une carte reseaux en utilisant api google maps comment je fé

  3. thierry
    Posté le 09/09/2009 à 19h39

    MERCI MERCI
    La qualité des tutos est vraiment exceptionnelle
    (j’ai juste un décalage de 500 mètres entre l’adresse demandé et le pointeur)

    Je verra bien une suite avec ça :-)

    http://code.google.com/intl/fr/apis/maps/documentation/examples/adsmanager-adunit.html
    et ça
    http://code.google.com/intl/fr/apis/maps/documentation/examples/control-googlebar-ads.html

  4. TanKer
    Posté le 14/08/2009 à 16h21

    on peux aussi prendre le code que donne Google…. wink

  5. nanana
    Posté le 03/05/2009 à 15h18

    et efface les amp et les ; de ce que je viens de donner

  6. nanana
    Posté le 03/05/2009 à 15h16

    je crois qu’il faut que tu inseres ces 2 lignes

    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;sensor=false&amp;key=TA CLE" type="text/javascript"></script>
    <script src="http://www.google.com/jsapi?key=TA CLE" type="text/javascript"></script>

    bises

  7. julius0123
    Posté le 29/04/2009 à 10h44

    Bonjour, j’ai essayer de suivre ce tuto mais je n’arrive pas à afficherla google map ! ! !
    <script src="http://www.google.com/ET LE RESTE DU CODE" type="text/javascript"></script>

    C’est quoi le RESTE DU CODE ????

    J’ai bien ma clé mais la je vois pas ! !Pourriez vous m’aider

  8. nanana
    Posté le 26/04/2009 à 11h45

    en plus il semble que ce soit l’ancien système google map. maintenant ils en ont un mieux. alors AU BOULOT!

  9. Francois
    Posté le 25/04/2009 à 14h28

    Fais gaffe y’a quelques trucs de jQuery, d’ailleurs, il aurait fallu l’enlever car il ne sert pas à grand chose ici

  10. nanana
    Posté le 25/04/2009 à 11h28

    haha coule
    ça de moins à faire

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>