Pré requis

Pour aborder ce billet, vous devez connaître le HTML et le JavaScript. En effet, l'API Google Map repose sur ces deux langages.

J'ouvre une parenthèse sur l'API Key, où clé API, qui était jusque là requise. Cette nouvelle version de l'API Google Map ne requiert plus l'utilisation d'une clé.

Enfin, à tout moment vous pouvez consulter la documentation de l'API.

Charger la librairie

Ajoutez simplement entre les balise <head> et </head> de votre page le code suivant :

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

Vous remarquez donc que nous chargeons simplement un fichier JavaScript qui définira toute ce dont nous aurons besoin pour utiliser la librairie.

Notez la présence la variabale sensor pour laquelle nous avons donnée la valeur false. Cette variable sert à indiquer si notre utilisateur est localisé à l'aide d'un GPS où non. Dans la pluspart des cas, la réponse est non, vous pourrez donc laisser la valeur false. Pour les autres, vous devrez la passer à true.

Voici donc le code HTML que nous utiliserons pour les exemples qui vont suivre et dans le quel nous placerons le code destiné à générer nos cartes :

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Google Map API V3</title>
	<link type="text/css" href="style.css" rel="stylesheet" />
 
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	window.onload = function() {
		// Nous placerons ici le code servant à créer notre carte
	}
	</script>
</head>
<body>
	<div id="map">
	</div>
</body>
</html>

Nous précisons dans ce code que la page est encodée en UTF-8. Je vous recommande cette encodage puisque c'est celui-ci qu'utilise Google par défaut. N'oubliez donc pas de préciser dans votre éditeur que le fichier doit être encoder en UTF-8.

J'ai également créé un espace destiné à accueillir le code de génération de nos cartes. Vous pouvez bien sur le placer dans un fichier externe. Remarquez que j'utilise l'évènement onload pour déclencher l'exécution de ce code. Je vous recommande, si vous utilisez un framework, tel que jQuery ou Mootools par exemple, d'utiliser l'évènement que celui-ci propose pour le chargement de la page.

Enfin, j'ai créé un div destiné à accueillir notre carte. Vous devrez lui donner des dimensions (ce que je fais à l'aide de ma feuille CSS) et il devra impérativement être visible au chargement de la page. En effet, l'API utilise les dimensions de ce div pour connaître les éléments de la carte qui doivent être chargés. Or, pour un élément qui est invisible à l'utilisateur (display:none), ses dimensions valent 0 et il manquera des morceaux de votre carte.

Quelques objets

Avant de créer notre première carte, nous devons étudier deux objets qui permettront d'une part de créer la carte et d'autre part de la centrer sur un point précis.

LatLng(Latitude,Longitude)

Cet objet permet de définir un emplacement géographique à l'aide de ses coordonnées : longitude et latitude. Un exemple simple :

var myLatlng = new google.maps.LatLng(-34.397, 150.644);

Map(Conteneur,Options)

L'objet Map sert, comme son nom l'indique, à créer une carte. Il prend en premier paramètre l'élément destiné à contenir la carte et en second paramètre un tableau statique définissant les options de cette carte.

Nous allons voir trois options :

  • zoom Définit le niveau de zoom, un nombre supérieur ou égale à 1.
  • center Définit le point sur lequel la carte sera centrée. Ce paramètre prend un objet de type Latlng que nous avons vu ci-dessus.
  • mapTypeId Définit le type de carte que nous souhaitons afficher. Les différentes valeurs possibles sont :
    • MapTypeId.ROADMAP affiche un plan (de type carte routière).
    • MapTypeId.SATELLITE affiche une vue satellite.
    • MapTypeId.HYBRID affiche une vue mixte entre les deux précédentes.
    • MapTypeId.TERRAIN affiche une vue du relief.

Première carte

Nous pouvons maintenant créer notre première carte à l'aide du script suivant :

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
	zoom: 8,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myOptions
	);

Vous pouvez également découvrir le rendu de cet exemple.

Conclusion

Nous verrons dans les prochain billets comment transformer une adresse postale en coordonnées géographiques, placer un marqueur sur la carte, etc.

<< Sommaire des articles Google Map API V3