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

Par Nouvelle-Techno.fr le 6 décembre 2017 - Catégories : Javascript API Tutoriel

Lire l'article sur le site d'origine

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>
		
 

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
});
 

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
		});	
	}
}


 

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; 

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
			});	
		}
	});
}

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

#Tutoriel