Pour pouvoir utiliser le service des Google Maps, il nous faut disposer d'un compte Google, puis nous devons générer la clé d'identification, qui ne sera valable que pour notre URL et qui devra être communiquée à chaque requête. Voici la clé de France-Chicha :

ABQIAAAAchjVJodtNg3aHL4x89tVQxSnvV_Xx1ZmeTuJ5IDZIaMYKGTVKxS0r96KKZlVp3ul5oKP3tCxX4Oe6w

Google nous fournit aussi gentiment 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>
<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=ABQIAAAAchjVJodtNg3aHL4x89tVQxSnvV_Xx1ZmeTuJ5IDZIaMYKGTVKxS0r96KKZlVp3ul5oKP3tCxX4Oe6w"  
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>

Cela donne une vue de Palo Alto, la maison de Google.

Nous allons modifier ce fichier. Tout d'abord, quelques précautions : certains utilisateurs ont désactivé Javascript et ne verront... rien. Sortons-les de leur détresse en les informant par un panneau d'information en noscript :

<noscript>  
<p><b>JavaScript doit être activé pour utiliser Google Maps.</b></p>  
<p>Il semblerait que JavaScript soit désactivé ou non supporté par votre navigateur. </p>
<p>Pour visualiser les cartes Google Maps, activez JavaScript dans les options 
     de votre navigateur et réessayez.</p>
</noscript>

Certains malchanceux, bien qu'ayant activé Javascript, peuvent être dotés d'un navigateur incompatible avec l'API Google Maps. Prévenons-les :

if (GBrowserIsCompatible()) { 
  // ... 
} else { 
  document.getElementById("map").innerHTML = "Nous sommes désolés, 
    mais l'API Google Maps n'est pas compatible avec votre navigateur. 
    Pour en profiter, peut-être pouvez-vous télécharger un autre navigateur ? 
    Nous vous conseillons l'excellent 
    <a href=\"http://www.mozilla-europe.org/fr/products/firefox/\">Firefox</a>" ;
}

Ces précautions prises, autorisons-nous un peu d'égocentrisme et revenons en France, en modifiant le centrage de la carte et son zoom :

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

Les coordonnées en latitude et longitude sont celles de Chateauroux, charmante bourgade à l'Ouest de Bourges, donc en plein centre de la France. La troisième valeur est le facteur de zoom, qui varie de 1 à 16 : à 1 vous avez une mappemonde, à 16 vous pouvez espionner votre voisin.

Comme nous sommes décidément très chauvins, nous réduisons aussi la taille de la carte pour ne voir que la France :

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

Le facteur de zoom doublant l'approche, avec un zoom de 6, il nous aurait fallu une carte de 650px par 650px. On ne sort jamais des puissances de 2... Voici donc notre carte de France

Un dernier pour la route : un petit peu plus haut (on augmente la latitude), un petit peu plus à droite (on augmente la longitude), un petit peu plus près et nous voici à Paris :

map.setCenter(new GLatLng(48.857, 2.335), 12);