Je me lance dans la découverte de l'API Google Maps et en profite pour rédiger une série de billets sur le sujet. Voici le premier tutoriel permettant de débuter dont la plupart des informations viennent de ce Google Maps API Tutorial de Mike Williams.

Avant toute chose, il faut disposer d'un compte Google car Google ne donne accès à son service qu'à travers une clé d'identification fournie aux seuls possesseurs de compte Google.

Disposant d'un compte Google, vous devez ensuite, générer la clé d'identification valable pour une URL donnée (et toutes ses sous URL) et qui devra être communiquée à chaque requête. La validation du formulaire vous donne :

Une clé du genre :

ABQIAAAA1x2klffHrefUjPpt9uu-YRSFwTc1YMYqORShagowwmhC3WCZJBTJ7YUSLR4rEGMAxpz2Jm54o0aACw

et le code d'une page permettant de tester le service avec cette clé :

<!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"> <head>Google Maps API : coordonnées d'un marqueur <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1x2klffHrefUjPpt9uu-YRSFwTc1YMYqORShagowwmhC3WCZJBTJ7YUSLR4rEGMAxpz2Jm54o0aACw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>

Le résultat de cette page ressemble à cet exemple 1. Le code source est assez limpide et simple à modifier pour centrer la carte sur la France avec un facteur de zoom adapté à la taille du div. Pour cela il suffit de modifier la ligne suivante :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

en fournissant latitude, longitude et facteur de zoom voulus :

map.setCenter(new GLatLng(46.85, 1.75), 6);

J'utilise aussi un div de taille supérieure :

<div id="map" style="width: 650px; height: 650px"></div>

Le résultat est visible sur l'exemple 2.

Plus de détails sur Instant maps with the Google Wizard.

Les autres billets de cette série sur l'API Google Maps :