Voici une liste d'utilisations courantes de l'API Google Map :
- Créer une carte
- Afficher des points (= marqueurs)
- Afficher un point avec un marqueur personnalisé
- Afficher une bulle au clic sur un marqueur (= InfoWindow)
Google Key API
Pour pouvoir utiliser l'API Google, vous devez tout d'abord avoir un compte Google et générer une clé.
- Rendez-vous à cette adresse et connectez-vous à votre compte Google
- Créez un nouveau projet en cliquant sur Continuer
- Renseignez les noms de domaines qui auront le droit d'utiliser la clé (ex:
*.mon-site.com
,127.0.0.1
,localhost
, ...) -
Copiez la clé de l'API :
Une carte basique
Voici le code HTML/Javascript pour afficher une carte simple, sans marqueur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#map {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var paris_latlong = {lat: 48.866667, lng: 2.333333};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: paris_latlong
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
Explications :
- Le code HTML ne contient qu'un élément
div
, dans lequel la carte sera générée en javascript. Cet élément doit avoir une largeur et une hauteur (cf. CSS). - On inclue la lib javascript de Google, en lui passant la clé générée précédemment.
- Le code générant la carte ne sera exécuté qu'une fois toute la page chargée
- Une fois le script chargé, la fonction
initMap()
est appelée en callback. - Pour initialiser la carte, il faut fournir au moins deux paramètres : les coordonnées du point central de la carte (latitude/longitude), et le niveau du zoom à appliquer.
Remarque :
Comme présenté dans la documentation officielle, Google conseille d'indiquer la clé d'API lors de l'appel à la librairie javascript. Il est toutefois possible de s'en passer (en phase de test par exemple), en modifiant l'URL :
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Afficher des marqueurs
Si on veut afficher des marqueurs, le code javascript devient :
function initMap() {
// Création de la carte
var paris_latlong = {lat: 48.866667, lng: 2.333333};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: paris_latlong
});
// Ajout de marqueurs
var markerList = [
{ lat: 48.837347, lng: 2.291787, title: "Marqueur n°1" },
{ lat: 48.879681, lng: 2.379958, title: "Marqueur n°2" },
{ lat: 48.822399, lng: 2.498793, title: "Marqueur n°3" }
];
for (var i = 0, length = markerList.length; i < length; i++) {
var latLng = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: markerList[i].title
});
}
}
Explications :
- On initialise un tableau contenant la liste des marqueurs, avec leurs coordonnées (latitude/longitude) et un libellé à afficher au survol (title).
- On parcourt ce tableau et on instancie des marqueurs, rattachés à la carte créée précédemment.
Remarque :
Pour centrer automatiquement la carte sur ces points, vous pouvez suivre cet article.
Afficher un marqueur personnalisé
Il est agréable d'utiliser ses propres icônes de marqueur.
Pour cela, il n'y a quasiment rien à ajouter :
function initMap() {
// Création de la carte
var paris_latlong = {lat: 48.866667, lng: 2.333333};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: paris_latlong
});
// Ajout du marqueur
var marker = new google.maps.Marker({
position: paris_latlong,
map: map,
title: 'Paris',
icon: 'http://www.devnotebook.fr/public/articles/api-diverses/utiliser-l-api-google-map-06.png'
});
}
Explication :
On a juste ajouté l'attribut icon
au marqueur.
Afficher une bulle d'information
Pour afficher une bulle d'information (InfoWindow
)
au clic sur le marqueur, voici ce que devient le code javascript :
function initMap() {
// Création de la carte
var paris_latlong = {lat: 48.866667, lng: 2.333333};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: paris_latlong
});
// Ajout du marqueur
var marker = new google.maps.Marker({
position: paris_latlong,
map: map,
title: 'Paris'
});
// Ajout d'une InfoWindow
var htmlContent = '<div class="info-window-container">';
htmlContent += ' <h2>Mon marqueur</h2>';
htmlContent += ' <p>Une petite description</p>';
htmlContent += ' <p><a href="https://developers.google.com/maps/documentation/javascript/infowindows">Lien vers l\'API Google</a></p>';
htmlContent += '</div>';
var infoWindow = new google.maps.InfoWindow({
content: htmlContent
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
Explications :
- On stocke du HTML dans une variable javascript.
- On instancie un objet
InfoWindow
avec pour contenu ce code HTML. - On ajoute un écouteur pour l'évènement clic sur le marqueur, pour que l'InfoWindow s'ouvre.