Google Maps API - Première Carte

Création d'une carte centrée sur Paris

Pour afficher cette première carte il vous suffit de créer un fichier HTML avec le contenu ci-dessous.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> // LIGNE 4
	</head>

	<body>
		<div id="map" style="width:100%; height:100%"></div>
	</body>
</html>
<script type="text/javascript">
	var options = { // LIGNE 12
		center: new google.maps.LatLng(48.833, 2.333),
		zoom: 6,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
		
	var map = new google.maps.Map(document.getElementById("map"), options); // LIGNE 18
</script>
Quelques éléments sur ce code :

Le niveau de zoom 0 correspond à la vue de la terre entière et plus celui-ci augmente plus le détail augmente. Les trois images suivantes reflètent les niveaux de zoom 0, 7 et 18.

Le mapTypeId définit le type de carte que l'on souhaite afficher avec les 4 options suivantes possibles.

google.maps.MapTypeId.ROADMAP google.maps.MapTypeId.SATELLITE google.maps.MapTypeId.HYBRID google.maps.MapTypeId.TERRAIN
Ces deux paramètres peuvent être modifiés à postériori par l'utilisateur directement avec les boutons accessibles en haut à droite et en haut à gauche sur la carte. D'autres options peuvent être utilisées lors de la construction de la carte : La liste complète des options peut être trouvée à cette adresse : MapOptions (en anglais).

Contrairement à cet exemple, si vous insérez une carte dans une page ou il y a d'autres informations, comme un menu, des formulaires ou bien encore des images, il est préférable de charger la carte après l'affichage de la page. Pour se faire, il faut déclarer l'attribut onload sur le tag BODY. Il en résultera un appel à la méthode initialize quand la page sera chargée.

<body onload="initialize()">

Ensuite, il suffit d'englober le code javascript précédent dans une méthode du même nom.

<script type="text/javascript">
	function initialize() {
		var options = {
			center: new google.maps.LatLng(48.833, 2.333),
			zoom: 6,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var map = new google.maps.Map(document.getElementById("map"), options);
	}
</script>

A suivre : Gestion des markers Voir le tutoriel

comments powered by Disqus