Comment créer une carte avec l’API Google Map v3

Nathanaël Cherrier -

Il y a quelques jours, nous avons reçu nos projets de fin d’année. Je peux vous dire que ça rigole plus là. Dans le contexte du projet de WebDev j’ai dû faire des recherches sur la célèbre API de Google : Map. Alors, je viens écrire ici ce que j’ai appris afin de les retrouver plus tard et qu’elles servent à d’autre.

Création de la carte

Il faut dans un premier temps, charger l’API Google Map v3 qui se trouve a cette adresse : http://maps.google.com/maps/api/js?sensor=true

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> ... </script>

L’API Google Map v3 est chargé, mais maintenant il faut créer la carte, l’afficher, etc. La fonction qui s’occupera de lancer la carte sera init()

function init() { 
    map = new google.maps.Map(document.getElementById("carte"), { 
        zoom: 19, 
        center: new google.maps.LatLng(48.858565, 2.347198), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
}

Créons le HTML correspondant. Une div suffira.

<body onload="init()"> 
    <div id="carte" style="width:100%; height:100%"></div> 
</body>

Alors, expliquons ce code. On lance la fonction init() lorsque la page HTML se charge, puis dans la fonction init() on crée un objet google.maps.Map qui prend en paramètre la div qui le correspondra. Pour ce qui est des attributs de cet objet, on doit définir le zoom, le centre de la carte en latitude et longitude, et enfin mapTypeId. Qu’est-ce que mapTypeId ? Google Map a besoin de savoir quel type de carte afficher. Vous avez le choix entre :

  • MapTypeId.ROADMAP (Vue par défaut « plan)
  • MapTypeId.SATELLITE (Vue satellite 3D)
  • MapTypeId.HYBRID (Un mix de Roadmap et satellite)
  • MapTypeId.TERRAIN (Simple carte avec les données physiques)

Voilà, avec ce code vous avez une carte Google Map qui fait la « taille de votre navigateur » !

Bonus — Afficher une liste de marqueur à partir d’un fichier KML

Qu’est-ce qu’un fichier KML ?

Le format KML est un XML propriétaire de Google. Il est adapté aux données géographiques et est lisible par Google Map et Google Eart (Attention GMap et GEart ne lise pas exactement pareil les fichiers KML).

Utilisation ?

La première utilisation est la sauvegarde des recherches GMap. Effectivement, on peut sauvegarder nos recherches sous forme d’une liste de points qu’un logiciel ou API comme GMap ou GEart pourra réinterpréter plus tard. Deuxième utilisation, fournir à tout le monde des données géographiques en temps réel pour que des services externe à notre société et se basant sur nos données puissent exister. C’est ce que fait, par exemple, la ville de paris avec les données du vélib. On peut récupérer sur ses serveurs un fichier XML contenant toutes les données en temps réel sur les stations de vélib. Il suffit ensuite de les parser en KML pour les envoyer simplement a GMap.

Comment faire ?

Le tout réside en deux lignes.

function init() { 
    map = new google.maps.Map(document.getElementById("carte"), { 
        zoom: 19, 
        center: new google.maps.LatLng(48.858565, 2.347198), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var georssLayer = new google.maps.KmlLayer('http://www.parisavelo.net/velib.kml'); 
    georssLayer.setMap(map);  
}

On a déclaré un objet KmlLayer qui prend en paramètre le chemin vers le fichier KML de notre choix. Après on l’affiche sur la map. Voilà ! À vous de jouer !