Intégrer une carte Google Map

23 avr | Catégorie: Javascript | Rédigé par Léo | 3731 lectures

Aujourd'hui nous allons voir comment intégrer une carte Google Map dans vos pages web.

Pour ce tutoriel j'utilise la bibliothèque jQuery. Elle me permet de récupérer dynamiquement les coordonées à utiliser. Cela vous permet d'utiliser le même code pour plusieurs pages. Par exemple, imaginons que votre site ait pour sujet la critique de restaurant et qu'il permette la création de "fiche" de restaurant comportant les coordonnées du restaurant et une carte pour visualiser son emplacement.

1. Code HTML

<!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>
		<title>Critiques de restaurants - Léo Fontin</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
 		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<meta name="author" content="Snoupix"/>
		<script src="http://maps.google.com/VOTRE CLE GOOGLE" type="text/javascript"></script>
		<script src="http://www.google.com/ET LE RESTE DU CODE" type="text/javascript"></script>
		<script src="jquery-1.3.2.min.js" type="text/javascript" ></script>
		<script src="scriptGoogleMap.js" type="text/javascript" ></script>
	</head>

	<body>
		<div id="global">
			<h1>Houaa, Google m'a trouvé</h1>
			<div id="coordonnees">
				<h2>Mes coordonnés</h2>
				<p>Nom : <b id="nom">Snoupix</b></p>
				<p>Adresse : <b id="adresse">35 rue d'hérouville, Caen, France</b></p>
			</div>
			<div id="map"></div>
		</div>
	</body>
</html>
</textearea></pre>

Quelques mots sur le code HTML. Tout d'abord notez bien les "id" nom et adresse. C'est grâce à ces id que nous pourrons récupérer les valeur d'adresse et de nom grâce à jQuery. De plus c'est dans la div id="map" que la carte sera intégrée.

Pour finir, le plus inportant. Vous devez vous inscrire gratuitement à l'API Google Map pour avoir une clé de carte personnelle. Allez à cette adresse http://code.google.com/intl/fr/apis/maps/signup.html, inscrivez vous et récupérez la clé Google que vous devrez intégrer dans les balises <head> de votre fichier HTML.

2. Code javascript

	//initilaisation des variables
	var map = null;
	var geocoder = null;
  
function load() {
	if (GBrowserIsCompatible()) {
	
		//nouvel objet de type Map	
		map = new GMap2(document.getElementById("map"));
		
		//centralisa de la carte initiale. 
		//Emplacement fait en fonction des code Longitude et Latitude
		map.setCenter(new GLatLng(48.9, 2.3), 13);
		
		//affichage des contrôleurs de zoom, ...
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		
		//nouvel Obget de géocodeur
		geocoder = new GClientGeocoder();
	}
   
   
  //récupération des valeurs des champs d'adresse et nom    
	var adresse = $('#adresse').text();
	var nom = $('#nom').text();
     
	if (geocoder) {
		geocoder.getLatLng(
			adresse,function(point) {
				//si l'adresse n'existe pas on l'affiche
				if (!point) {
					alert(adresse + " introuvable");
				} else {
					
					//centrer la carte sur les coordonnées. 
					//le chiffre 13 correspond au zoom de visualisation de la carte
					map.setCenter(point, 13);
					
					//initialisation du pointer (flêche rouge)
					var marker = new GMarker(point);
					map.addOverlay(marker);
					
					//création des informations affichées sur le pointeur
					marker.openInfoWindowHtml(nom +"<br />"+adresse);
				}
			}
		);
	}
}
  
// appelle de la fonction d'initailisation et de chargement de la page dès que google est ok.   
google.setOnLoadCallback(load)

Ce code est très simple. N'essayez pas de faire des correspondances avec javascript, ce code est du pûr Google uniquement comprit par les scripts Google.

Maintenant à vous de jouer, et n'hésitez pas à bidouiller ce code pour l'adapter à vos projets.

Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.

Partager ce tutoriel :

8 Commentaires

le 25 avril à 11h28 nanana Répondre haha coule
ça de moins à faire

le 25 avril à 14h28 Francois Répondre Fais gaffe y'a quelques trucs de jQuery, d'ailleurs, il aurait fallu l'enlever car il ne sert pas à grand chose ici

le 26 avril à 11h45 nanana Répondre en plus il semble que ce soit l'ancien système google map. maintenant ils en ont un mieux. alors AU BOULOT!

le 29 avril à 10h44 julius0123 Répondre Bonjour, j'ai essayer de suivre ce tuto mais je n'arrive pas à afficherla google map ! ! !
<script src="http://www.google.com/ET LE RESTE DU CODE" type="text/javascript"></script>

C'est quoi le RESTE DU CODE ????

J'ai bien ma clé mais la je vois pas ! !Pourriez vous m'aider

le 03 mai à 15h16 nanana Répondre je crois qu'il faut que tu inseres ces 2 lignes

<script src="http://maps.google.com/maps?file=api&;amp;v=2&sensor=false&key=TA CLE" type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=TA CLE" type="text/javascript"></script>

bises

le 03 mai à 15h18 nanana Répondre et efface les amp et les ; de ce que je viens de donner

le 14 août à 16h21 TanKer Répondre on peux aussi prendre le code que donne Google....

le 09 septembre à 19h39 thierry Répondre MERCI MERCI
La qualité des tutos est vraiment exceptionnelle
(j'ai juste un décalage de 500 mètres entre l'adresse demandé et le pointeur)

Je verra bien une suite avec ça :-)

http://code.google.com/intl/fr/apis/maps/documentation/examples/adsmanager-adunit.html
et ça
http://code.google.com/intl/fr/apis/maps/documentation/examples/control-googlebar-ads.html

Intégrer une carte Google Map | Snoupix