Pas à Pas - Insérer une carte Google Maps avec l'API Google Maps Javascript

06 décembre 2017 - : HTML Javascript jQuery - : 6 commentaire.s

Pas à Pas - Insérer une carte Google Maps avec l'API Google Maps Javascript

Série API Javascript de Google Maps

De nombreux sites proposent des cartes interactives issues de Google Maps et contenant des marqueurs issus d’une base de données.

Nous allons voir pas à pas comment parvenir à ce résultat.

Pour commencer, nous allons devoir obtenir une clé pour l’API Google Maps Javascript, cette clé nous permettant d’accéder gratuitement au service (pour un nombre limité de requêtes).

Rendez-vous sur le site de Google afin d’obtenir votre clé.

Une fois cette clé en votre possession, vous pouvez passer à l’étape suivante.

Initialisation de la carte

L’exemple ci-dessous permet de réaliser une initialisation « basique » de la carte et de la centrer sur Paris.

Pour ce faire, créez un simple fichier html et insérez le code ci-dessous. Nous avons volontairement utilisé du Javascript et non jQuery.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://maps.google.com/maps/api/js?key=[AJOUTEZ_VOTRE_CLE_API_ICI]" type="text/javascript"></script>
		<script async type="text/javascript">
			// On initialise la latitude et la longitude de Paris (centre de la carte)
			var lat = 48.852969;
			var lon = 2.349903;
			var map = null;
			// Fonction d'initialisation de la carte
			function initMap() {
				// Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
				map = new google.maps.Map(document.getElementById("map"), {
					// Nous plaçons le centre de la carte avec les coordonnées ci-dessus
					center: new google.maps.LatLng(lat, lon), 
					// Nous définissons le zoom par défaut
					zoom: 11, 
					// Nous définissons le type de carte (ici carte routière)
					mapTypeId: google.maps.MapTypeId.ROADMAP, 
					// Nous activons les options de contrôle de la carte (plan, satellite...)
					mapTypeControl: true,
					// Nous désactivons la roulette de souris
					scrollwheel: false, 
					mapTypeControlOptions: {
						// Cette option sert à définir comment les options se placent
						style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
					},
					// Activation des options de navigation dans la carte (zoom...)
					navigationControl: true, 
					navigationControlOptions: {
						// Comment ces options doivent-elles s'afficher
						style: google.maps.NavigationControlStyle.ZOOM_PAN 
					}
				});
			}
			window.onload = function(){
				// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
				initMap(); 
			};
		</script>
		<style type="text/css">
			#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
				height:400px;
			}
		</style>
		<title>Carte</title>
	</head>
	<body>
		<div id="map">
			<!-- Ici s'affichera la carte -->
		</div>
	</body>
</html>
		
Langage : HTML/Javascript

Ajout d’un marqueur

Bien sûr, cette carte ne fait apparaître aucun marqueur de position. Il pourrait être intéressant de mettre un marqueur aux coordonnées que nous avons entrées.

Pour ce faire, nous allons insérer le code d’ajout de marqueur ci-dessous juste avant la fermeture de notre fonction initMap (au dessus de l’accolade située en ligne 36 sur le code ci-dessus).

// Nous ajoutons un marqueur
var marker = new google.maps.Marker({
	// Nous définissons sa position (syntaxe json)
	position: {lat: lat, lng: lon},
	// Nous définissons à quelle carte il est ajouté
	map: map
});
Langage : Javascript

Ajout de plusieurs marqueurs

Bien sûr, nous pourrions avoir besoin de plusieurs marqueurs. Google Maps nous propose donc d’ajouter ces différents points en effectuant une boucle sur un tableau contenant les différentes coordonnées.

Dans notre exemple, nous aurons 4 points correspondant à 4 villes. Nous allons initialiser un tableau json « en dur » et le parcourir pour placer les différents marqueurs.

Voici la fonction initMap mise à jour, les lignes ajoutées sont en surbrillance.

// Nous initialisons une liste de marqueurs
var villes = {
	"Paris":{"lat": 48.852969,"lon": 2.349903},
	"Brest":{"lat": 48.383,"lon": -4.500},
	"Quimper":{"lat": 48.000,"lon": -4.100},
	"Bayonne":{"lat": 43.500,"lon": -1.467}
};
function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(lat, lon),
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		scrollwheel: false,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
		},
		navigationControl: true,
		navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	});
	// Nous parcourons la liste des villes
	for(ville in villes){
		var marker = new google.maps.Marker({
			// A chaque boucle, la latitude et la longitude sont lues dans le tableau
			position: {lat: villes[ville].lat, lng: villes[ville].lon},
			// On en profite pour ajouter une info-bulle contenant le nom de la ville
			title: ville,
			map: map
		});	
	}
}
Langage : Javascript

Lecture de la base de données

Pour cet exemple, nous allons utiliser une base de données très simple, avec une seule table dont la structure est ci-dessous.

Pour faire dialoguer notre carte avec la base, nous allons utiliser Ajax. Afin de simplifier le code, nous utiliserons jQuery pour effectuer cette requête.

Il y a peu de différence dans le fonctionnement entre un tableau « en dur » et un tableau récupéré en ajax.

Nous allons préparer un fichier PHP qui interrogera la base de données et retournera du json.

// N'OUBLIEZ PAS DE VOUS CONNECTER A LA BASE DE DONNEES

// On prépare la requête
$sql = "SELECT * FROM villes";
$stmt = $dbh->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// On transforme le tableau PHP en json
$retour = json_encode($results);

// On retourne le tableau à la fonction appelante
echo $retour; 
Langage : PHP - Fichier selectData.php

Maintenant que notre fichier PHP interroge la base de données et retourne du json, nous allons modifier le fichier html pour l’utiliser.

Nous utiliserons donc Ajax pour appeler ce fichier PHP, récupérer les données et ajouter les marqueurs. Il sera nécessaire d’utiliser jQuery pour cette partie et donc de le déclarer dans la partie <head> de notre html.

La fonction initMap sera modifiée comme suit

function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(lat, lon),
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		scrollwheel: false,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
		},
			navigationControl: true,
			navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	});
	// Nous appelons la fonction ajax de jQuery
	$.ajax({
		// On pointe vers le fichier selectData.php
		url : "selectData.php",
	}).done(function(json){ // Si on obtient une réponse, elle est stockée dans la variable json
		// On construit l'objet villes à partir de la variable json 
		var villes = JSON.parse(json);
		// On parcourt l'objet villes
		for(ville in villes){
			var marker = new google.maps.Marker({
				// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
				position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lon)},
				title: villes[ville].nomVille,
				map: map
			});	
		}
	});
}
Langage : Javascript

Et voilà, dans un prochain tutoriel nous verrons comment regrouper les marqueurs proches en clusters de marqueurs.

Commentaires

Ecrire un commentaire

Stéphane a écrit le 24 avril 2018 à 00:04

Bonsoir,

merci pour votre aide.

Effectivement voici les erreurs dans la console :
ReferenceError: $ is not defined
initMap
window.onload

Répondre

Nouvelle-Techno.fr a répondu le 24 avril 2018 à 00:04

Bonsoir,

$ is not defined indique que jQuery n’a pas été déclaré dans le du fichier html. Est-ce le cas ?

Répondre

Stéphane a écrit le 24 avril 2018 à 00:04

Bonjour,
j’ai bien suivi toutes les instructions, créé la table ville, insérer les 4 villes dedans.
Quand je lance index.html, la carte s’affiche mais aucun marqueur dessus.

Pourtant que j’affiche selectData.php, j’ai bien les données qui s’affichent :

[{« id »: »1″, »nomVille »: »Paris », »lat »: »48.853″, »lon »: »2.3499″},{« id »: »2″, »nomVille »: »Brest », »lat »: »48.383″, »lon »: »-4.5″},{« id »: »3″, »nomVille »: »Quimper », »lat »: »48″, »lon »: »-4.1″},{« id »: »4″, »nomVille »: »Bayonne », »lat »: »43.5″, »lon »: »-1.467″}]

Voici mes 2 fichiers :

selectData.php

getMessage() . « »;
die();
}

// On prépare la requête
$sql = « SELECT * FROM villes »;
$stmt = $dbh->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// On transforme le tableau PHP en json
$retour = json_encode($results);

// On retourne le tableau à la fonction appelante
echo $retour;
?>

Voici mon fichier index.html :

https://maps.google.com/maps/api/js?key=AIzaSyA1FgSylyiGdgaFmtWOJrtJZrh-fns_vrM

// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = 48.852969;
var lon = 2.349903;
var map = null;
// Fonction d’initialisation de la carte
function initMap() {
// Créer l’objet « map » et l’insèrer dans l’élément HTML qui a l’ID « map »
map = new google.maps.Map(document.getElementById(« map »), {
// Nous plaçons le centre de la carte avec les coordonnées ci-dessus
center: new google.maps.LatLng(lat, lon),
// Nous définissons le zoom par défaut
zoom: 11,
// Nous définissons le type de carte (ici carte routière)
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Nous activons les options de contrôle de la carte (plan, satellite…)
mapTypeControl: true,
// Nous désactivons la roulette de souris
scrollwheel: false,
mapTypeControlOptions: {
// Cette option sert à définir comment les options se placent
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
// Activation des options de navigation dans la carte (zoom…)
navigationControl: true,
navigationControlOptions: {
// Comment ces options doivent-elles s’afficher
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});

// Nous appelons la fonction ajax de jQuery
$.ajax({
// On pointe vers le fichier selectData.php
url : « selectData.php »,
}).done(function(json){ // Si on obtient une réponse, elle est stockée dans la variable json
// On construit l’objet villes à partir de la variable json
var villes = JSON.parse(json);
// On parcourt l’objet villes
for(ville in villes){
var marker = new google.maps.Marker({
// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lon)},
title: villes[ville].nomVille,
map: map
});
}
});
}
window.onload = function(){
// Fonction d’initialisation qui s’exécute lorsque le DOM est chargé
initMap();
};

#map{ /* la carte DOIT avoir une hauteur sinon elle n’apparaît pas */
height:400px;
}

Carte

Pouvez-vous m’aider ?

Merci pour votre aide.

Répondre

Nouvelle-Techno.fr a répondu le 24 avril 2018 à 00:04

Bonsoir,

Les extraits de code collés semblent avoir été modifiés lors de la publication de l’article. Y a-t-il un message d’erreur dans la console ? (touche F12 puis console)

Répondre

Écrevisse Bistable a écrit le 12 décembre 2017 à 00:12

Très bon tutoriel, j’ai juste une petite question.

« Pour ce faire, nous allons insérer le code d’ajout de marqueur ci-dessous juste avant la fermeture de notre fonction initMap (au dessus le l’accolade située en ligne 26 sur le code ci-dessus). »

Tu ne voulais pas dire « Pour ce faire, nous allons insérer le code d’ajout de marqueur ci-dessous juste avant la fermeture de notre fonction initMap (au dessus DE l’accolade située en ligne 36 sur le code ci-dessus). » ?

Ligne 36 et non 26 ?

PS :
« Nous allons voir par à pas comment parvenir à ce résultat. » => « Nous allons voir PAS à pas comment parvenir à ce résultat. »
(petite faute de frappe en début d’article)

Répondre

Nouvelle-Techno.fr a répondu le 12 décembre 2017 à 15:12

Bien vu, l’article a été corrigé, merci de ton attention et de me l’avoir signalé.

Et un grand merci pour tes encouragements

Répondre

Laisser un commentaire