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

Série API Javascript de Google Maps

Pas à Pas – Insérer une carte Google Maps avec l’API Google Maps Javascript
Pas à Pas – API Google Maps Javascript « InfoWindow », marqueurs personnalisés et clusters

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

			});	

		}

	});

}