Ajouter une carte Google Maps dans une page web

Décembre 2012

Google Maps n'est pas seulement un site de Google, c'est aussi un service que tout le monde peut utiliser sur son site via l'API Google Maps (interface de programmation).

Pour insérer une carte Google Maps dans une page web, il faut commencer par inclure le JavaScript de l'API :

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

Le paramètre sensor permet d'indiquer si on souhaite utiliser le matériel pour la géolocalisation (certains terminaux comme les smartphones sont équipés de GPS). Dans le cas présent on ne va pas utiliser ces fonctions avancées, donc on met le paramètre à false.

La première chose à faire est de créer une div avec un identifiant (exemple: map_canvas) qui va servir à contenir la carte.

Ensuite, il faut définir les coordonnées du centre de la carte et également d'un marqueur (facultatif) :

Après avoir lu importer un document excel dans une base de données vous en saurez d'avantage sur ce sujet.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Google Maps</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	window.onload = function(){
		var config = {
			latitude  : 48.865460,
			longitude : 2.321120,
			location  : 'Paris, Ile de France, France'
		};

		// Création d'un objet pLatLng pour stocker les coordonnées
		var latlng = new google.maps.LatLng(config.latitude, config.longitude);

		// Options de la carte
		var myOptions = {
			zoom: 2,
			center: latlng,
			// mapTypeId: google.maps.MapTypeId.SATELLITE
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		// Création et affichage de la carte dans le div map_canvas
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		// Ajout d'un marqueur sur la carte
		var mark = new google.maps.Marker({
			position: latlng,
			map:      map,
			title:    config.location
		});
	}
	</script>
</head>
<body>
	<div id="map_canvas" style="width:640px; height:360px;"></div>
</body>
</html>

Vous pouvez choisir le type de carte à afficher (photo satellite / carte) avec le paramètre MapTypeId.

L'API Google Maps est régulièrement mise à jour, donc prenez le temps de vous documenter sur la dernière version sur le site officiel avant de l'utiliser. Le code ci-dessus n'est qu'un exemple.

Allez donc jeter un oeil sur cette page : lomographie.

Fil de lecture

0 commentaire