Maps - Google Maps - Première Carte

Récupération de l'API et création d'une carte centrée sur Paris
Sources :

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

<!DOCTYPE html>
<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 5
	</head>
	<style>
		html, body { height: 100% }
	</style>

	<body>
		<div id="map" style="width:100%; height:100%"></div>
	</body>
</html>
<script type="text/javascript">
	var options = { // LIGNE 16
		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 22
</script>
Voir le résultat dans un nouvel onglet
Quelques éléments sur ce code :
  • Ligne 5 : Importation de l'API. Le paramètre sensor peut-être utile pour géolocaliser l'appareil qui visualise la carte (si celui-ci émet sa position)
  • Ligne 16 : Les options de la carte : sa position (via l'objet Google google.maps.LatLng), son niveau de zoom et son type
  • Ligne 22 : Création de la carte dans le DIV map avec ses options

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.

Google Maps zoom niveau 0 Google Maps zoom niveau 7 Google Maps zoom niveau 20

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
Google Maps avec fond de carte type route Google Maps avec fond de carte type satellite Google Maps avec fond de carte type hybride Google Maps avec fond de carte type 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 :
  • disableDefaultUI : positionné à true, ce paramètre supprime les boutons pour changer le type de terrain et pour zoomer.
  • draggable : positionné à false, ce paramètre empèche l'utilisateur de déplacer la carte en maintenant le click droit de la souris enfoncé
  • zoomControl : positionné à false, ce paramètre empèche l'utilisateur de zoomer sur la carte avec la mollette de la souris
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>

COMMENTAIRES