Intégrer une carte Google Maps sur son site

E
ERICSTAMANT
Intégrer une carte Google Maps sur son site

Dans ce tutoriel, je vais vous faire découvrir deux façons d’intégrer une carte Google sur votre site. Il y a la méthode très simple qui est de prendre un code d’intégration de lieu de Google Maps (un iframe) et d’intégrer ce code à votre site. La seconde méthode est celle qui nous offre le plus de flexibilité, mais qui est plus complexe. Il s'agit de l’intégration avec l’API de Google Maps. Enfin, pour terminer, je vous fais découvrir une méthode très simple pour ajouter un style unique à vos cartes!

Intégrer une carte Google iframe sur son site

Cette méthode permet d’ajouter une carte Google très rapidement à votre site. Il s'agit simplement de récupérer le code d’intégration sous forme de “iframe” et de coller ce code HTML à votre source.

  1. Rendez-vous donc sur maps.google.ca et faites une recherche de votre lieu.
  2. Dans la colonne de gauche, se trouvera différentes informations sur le lieu, dont un bouton “Partager”.
  3. Sur la fenêtre ouverte, appuyez sur “Intégrer une carte”.
  4. Copiez le code du iframe et collez-le dans votre code source!

Intégrer Google Maps API sur son site

Cette méthode est plus complexe, mais offre beaucoup plus de flexibilité. Celle-ci permet de créer des applications qui nécessitent une carte interactive, tel que la recherche et l'affichage de plusieurs lieux. Dans ce tutoriel, nous allons voir comment intégrer la carte via JavaScript et y ajouter un marqueur personnalisé (exemple : votre logo).

Créer un compte Google Développeur

La première étape consiste à avoir une clé d'API. Google a mis en place cette pratique il y a quelque temps dans le but de limiter l'utilisation de par des quotas et ainsi facturer les applications qui prennent beaucoup de ressource. La simple intégration d'une carte sur votre site ne devrait pas être relié à des coûts, car vous disposez de 25000 affichages gratuites par jour. Au-delà, vous êtes facturé 0.50$ par 1000 affichages additionnels.

Rendez-vous donc sur la console développeur de Google :

https://cloud.google.com/

Sur le menu, en haut à droite de votre écran, appuyez sur "TRY IT FREE".

Vous serez alors invité à vous inscrire et à entrer vos informations de carte de crédit. Aucun prélèvement ne sera effectué et cela vous donnera droits à des crédits gratuits.

Suite à votre inscription, un projet sera créé. Vous pouvez utiliser celui-ci ou un créer un nouveau.

Vous devrez par la suite créer une clé d'API et activer celle-ci.

Créer une clé d'API pour Google Maps

En haut à gauche de la console pour développeur de Google, appuyez sur l'icône hamburger/menu pour ouvrir le menu.

Rendez-vous sur API et services, puis identifiants.

Suivez ensuite les instructions pour créer la clé d'API. Je vous suggère fortement de restreindre l'accès à la clé par le nom de domaine de votre site web. Notez cette clé quelque part, nous en aurons besoin bientôt.

Suite à cela, dans la colonne de gauche, appuyez sur "Bibliothèque" et recherchez "Maps JavaScript API". Appuyez ensuite sur "Activer", dans la nouvelle fenêtre.

Intégrer la carte Google

Ouvrez maintenant le code de votre site web.

Chargez la librairie JavaScript de Google Maps. Ce code est à insérer avant la fermeture de </body>.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

Remplacez YOUR_API_KEY par la clé d’API que vous avez précédemment créée.

Le paramètre callback "initMap" fait appel à une fonction pour charger la carte, dès que le fichier javascript est chargé.

Nous allons maintenant ajouter une division qui nous permettra d'afficher la carte. Ajoutez ce code où vous désirez voir la map s'afficher. Vous remarquerez un style de 500px de hauteur et une largeur de 100%. Vous pouvez modifier cela, selon vos besoins.

Nous allons maintenant ajouter un code JavaScript à notre page qui permettra l’affichage de la carte. Vous remarquerez la fonction “initMap” qui est chargée via le callback de la librairie incluse.

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: -25.363882, lng: 131.044922}
    });

    var CustomMarker = '/url/vers/votre/image.png';

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: CustomMarker,
      map: map
    });
  }
</script>

Explications :

Tel que mentionné plus haut, la fonction initMap sera chargée avec l'inclusion de la librairie de Google Maps. Comme son nom l'indique, celle-ci servira à initialiser la map. À l'intérieur de celle-ci, vous trouverez 3 variables avec options.

La variable "map" : permet de créer la carte, qui sera déposée dans la division avec ID "map". Le paramètre "zoom" permet de déterminer le zoom sur la map et le "center" détermine le centre de la carte, via la longitude et la latitude.

La variable "CustomMarker" : celle-ci permet simplement d'indiquer quelle image servira à remplacer le marqueur officiel de Google Maps.

La variable "marker" : elle permet de créer le marqueur sur la carte. Le paramètre "position" détermine l'emplacement du marqueur, "icon" indique l'image du marqueur et "map", c'est pour indiquer sur quelle carte placer le marqueur.

Et voilà! À partir de cela, vous êtes en mesure de créer des applications tel qu'une carte interactive qui affiche plusieurs lieux.

Stylisez vos maps avec snazzymaps!

SnazzyMaps.com est un super site qui propose des tonnes de style pour vos cartes. Vous pouvez en créer des customs, ou bien en choisir des existants.

Pour intégrer un style à votre carte, choisissez-en une, vous apercevrez alors le style à y intégrer.

Ajoutez "styles" en paramètre de votre "map", et collez-y le style proposé par SnazzyMaps. Je vous conseille de télécharger le modèle (appuyez sur "Need a bit more help? Download a simple example"), et prenez le code du style à cet endroit, il sera proposé en une seule ligne. Personnellement, je préfère ainsi.