/ api

[JavaScript] API Google Map v3

Il y a quelques jours, nous avons reçu nos projet de fin d’année. Bah je peux vous dire que ça rigole plus là. Dans le cadre de celui de WebDev j’ai du faire des recherches sur la célèbre API de Google : Map. Alors je viens écrire ici ce que j’ai appris histoire de les retrouver plus tard et qu’elles servent a 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éé un objet google.maps.Map qui prend en paramètre la div qui le correspondra. Pour ce qui est des attribut 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 quelle 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)

Et 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éographique et est lisible par Google Map et Google Eart (Attention GMap et GEart ne lise pas exactement pareil les fichier KML).

Utilisation?

La première utilisation est la sauvegarde des recherches GMap. En effet 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éré sur ses serveur un fichier XML contenant toute 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à voilà! À vous de jouer!