Tutoriel

API Google maps V3

Traitement cartographique de données de géolocalisation

Google Maps propose dans sa version 3, une API simple à utiliser et sans clé d'enregistrement, qui permet d'afficher des lieux sur une carte à partir de coordonnées géographiques.

Ce tutoriel est la suite du tuto sur le montage et la programmation d'un module de géolocalisation.
Les explications sont cependant génériques et s'adaptent à tous les projets d'intégration d'une carte Google Maps sur un site Web.

Si vous avez suivi le tutoriel sur la géolocalisation, nous avons envoyé des coordonnées géographiques depuis un module GPS embarqué, vers une page PHP.

Traitement des variables de localisation avec PHP

Récupération des variables

La récupération des données de latitude et de longitude s'effectuent dans cet exemple simplement par la méthode GET.

$lat = $_GET["lat"];
$lon = $_GET["lon"];

Transformation dans le système geodésique de Google Maps

Le GPS utilise un système de coordonnées sexagésimal qui n'est pas directement compatible avec celui utilisé par Google Maps (décimal). Nous allons devoir convertir les coordonnées avant de les transmettre.

- Traitement des coordonnées avec PHP :

<?php
$lat0 = $_GET["lat"]; // latitude sexagésimale
$lat1 = substr($lat0,0,2);
$lat2 = substr($lat0,2,9);
$lat2 = $lat2 / 60;
$lat = $lat1 + $lat2 ; // latitude décimale

$lon0 = $_GET["lon"]; // longitude sexagésimale
$lon1 = substr($lon0,0,2);
$lon2 = substr($lon0,2,9);
$lon2 = $lon2 / 60;
$lon = $lon1 + $lon2 ; // longitude décimale
?>

- Le même traitement de coordonnées avec Python :

# on considère que : latitude GPS = lat0 et longitude GPS = lon0

lat1 = lat0 [0 :2]
lat2 = lat0 [2:9]
lat2 = float(lat2) / 60
lat = float(lat1) + lat2 # latitude décimale

lon1 = lon0 [0 :3]
lon2 = lon0 [3 :10]
lon2 = float(lon2) / 60
lon = float(lon1) + lon2 # longitude décimale

Enregistrement des coordonnées

Ces coordonnées peuvent être maintenant stockées dans une base de données MySQL ou SQLite, en utilisant la méthode INSERT ou UPDATE. Elles pourront alors être récupérées à tout moment.
Nous pouvons dès à présent les enregistrer dans un format directement compatible avec le script google maps (latitude, longitude décimales séparées par une virgule)

$ll = $lat. ',' .$lon;

Création de la carte Google Maps

La création d’une carte google maps s’effectue en langage javascript. Tous les paramètres de votre carte et le positionnement des coordonnées géographiques sont définis dans une fonction, que nous allons découper en plusieurs étapes :

Initialisation des paramètres de la carte :

Vous pouvez choisir plusieurs types d’options d’affichage de la carte comme le niveau de zoom, son aspect, les options de navigation… Il est facile d'intégrer des variables php dans javascript. Dans le script suivant nous avons enregistré les coordonnées dans la variable $ll et le niveau de zoom dans une variable $zoom.

<script type="text/javascript">

function initialize() {

var latlng = new google.maps.LatLng(<?php echo $ll;?>);
var myOptions = {
zoom: <?php echo $zoom;?>,
center: latlng, mapTypeControl: false, scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

La carte est centrée sur les coordonnées $ll.
Option : on peut également choisir un autre icône que celui par défaut (les épingles rouges). Vous devez simplement indiquer le chemin de l'image de remplacement (dimensions 32x37). Google propose par ailleurs plusieurs icones à télécharger.

var voiture = car.png';

Création de la carte :

Ce script va créer une carte dans une div HTML avec id map_canvas :

var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

Création de la variable de position (coordonnées géographiques)

Nous définissons les coordonnées du marqueur avec la variable $ll :

var latlng1 = new google.maps.LatLng(<?php echo $ll;?>);

Création du marqueur sur la carte :

Le titre du marqueur permet d'afficher une petite info-bulle au passage de la souris sur le marqueur.

var marker = new google.maps.Marker({
position: latlng1, map: map, icon: voiture, title:"Position de ma voiture"
});

La carte est paramétrée, nous pouvons fermer la fonction initialize() :

}
</script>

Notes :

Vous pouvez créer autant de marqueurs que vous voulez sur la carte. Il existerait cependant une certaine limite au delà de la centaine de marqueurs. Pensez à ajuster le zoom et/ou le centrage de la carte.
Pour ajouter d'autres marqueurs, répétez les opérations de création de la variable de position et de marqueur :

var latlng2 = new google.maps.LatLng(<?php echo $ll2;?>);
var marker = new google.maps.Marker({
position: latlng2, map: map, icon: voiture, title:"Position de ma 2ème voiture"
});

Cette fonction javascript n’est peut être pas immédiatement évidente. Elle s’avère cependant rapidement très simple d’emploi, une fois sa logique expliquée (et nous espèrons avoir bien expliqué !).

Maintenant que notre carte est paramétrée, nous allons pouvoir l’afficher dans une page Web, avec un bout de code HTML.

Intégration de la carte en HTML

Appel de la fonction au chargement de la page

Il est nécessaire d'initialiser la fonction javascript dès le chargement de la page :

<body onload="initialize()">

Il suffit ensuite de créer une div HTML avec l'id appellé dans la variable javascript "map", n'importe où dans notre page HTML à l'intérieur du <body>. Les dimensions de la carte sont paramétrables :

<div id="map_canvas" style="margin: auto; margin-top: 20px; width: 600px; height: 350px;"></div>

On ne peut plus simple ! Vous pouvez bien sur embellir la carte avec une feuille de style CSS.

Vous pouvez passer au chapitre suivant pour découvrir la fonctionnalité de géocodage inversé, qui permet de récupérer les coordonnées d'un lieu à partir d'une simple adresse.

Continuer Retour