Api Google Maps flèche Carte flèche Créer sa première carte Google Maps - GMap2 - google.maps.Map2.

CRÉEZ VOTRE PREMIÈRE CARTE AVEC L'API DE GOOGLE MAP

Article créé le : 07/10/2008
 

Présentation

Avant de créer votre carte, assurez vous que vous disposez :

Dès lors, vous allez pouvoir créer, par exemple, une carte dont les caractéristiques sont les suivantes :

  • Nommée "maCarte",
  • Située dans une balise <div> ayant pour id ( identifiant ) "EmplacementDeMaCarte",
  • Largeur : 740 pixels,
  • Hauteur : 400 pixels,
  • Centrée sur le château de Villandry en Indre et Loire (37)
    • Latitude    : 47.341571
    • Longitude : 0.514233
  • Niveau de zoom : 13.

Carte

Code

Code : Créer sa première carte Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte ma première carte</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • //]]>
  • </script>
  • </head>
  •  
  • <body>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>

Code : Créer sa première carte Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte ma première carte</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false" type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.341571, 0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • //]]>
  • </script>
  • </head>
  •  
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>

Remarque(s)

Comment adapter cette carte à mes besoins ?

Pour adapter cet exemple à vos besoins, il vous suffit de copier un des deux exemples de codes situés ci-dessus, puis d'effectuer les modifications suivantes :

  • Repère N° 1 Repère N° 1 remplacer " Mettez_Votre_Clef_API_ Ici ", par la clé API Google Maps attribuée pour votre site,
  • Repère N° 2 Repère N° 2 puis modifiez :
    • 47.341571 : par votre Latitude,
    • 0.514233 : par votre Longitude,
    • 13 : par le niveau de zoom que vous souhaitez appliquer (de 0 à 17 voire plus par endroit).
  • Repère N° 3 Repère N° 3 Enfin, pour adapter la taille de la carte à votre page web modifiez :
    • width: 740px : Largeur de la carte (en pixel)
    • height: 400px : Hauteur de la carte (en pixel)

Comment obtenir les coordonnées GPS d'une adresse ?

Pas besoin de GPS ! Lisez ce tutoriel intitulé :

Api Google Maps - Trucs-et-astuces - Comment obtenir les coordonnées (Latitude - Longitude) d'un point ou d'une adresse postale sans GPS

Paramètres par défaut d'une carte

Par défaut, la carte générée par Google Maps a les caractéristiques suivantes :

  • Le format de la carte affichée est "Plan" [ G_NORMAL_MAP ],
  • Elle est déplaçable. Avec la souris, il suffit de cliquer sur la carte et de maintenir le bouton enfoncé pour pouvoir la déplacer,
  • L'affichage des fenêtres ou info-bulles (simples ou à onglets) sur la carte est autorisé,
  • Un double clique sur la carte avec le bouton gauche de votre souris, permet de centrer la carte et de zoomer en avant sur le point cliqué,
  • Un double clique sur la carte avec le bouton droit de votre souris, permet de centrer la carte et de zoomer en arrière sur le point cliqué,
  • Aucun contrôle n'apparaît sur la carte (Bouton, Zoom, Echelle, Mini-carte).