Comment ajouter un lien Google Maps dans votre site web

Assurément, ajouter un Google Maps dans votre site web apporte à ce dernier une valeur ajoutée considérable. C’est un service de cartographie en ligne permettant à toute personne de voir l’ensemble des itinéraires menant à vos locaux ou site d’exploitation, facilitant ainsi votre localisation.

Grâce à Google maps, on peut zoomer de l’échelle d’un pays à l’échelle d’une rue. Il est possible d’avoir aussi une vue en plan classique, avec le nom des rues, quartiers, villes et une vue en image satellite, qui couvre aujourd’hui le monde entier. Nous allons dans cet article, vous montrer premièrement comment un débutant peut facilement ajouter un lien Google Maps dans son site web puis comment une personne ayant des notions en HTML et CSS et JavaScript pourra le réaliser.

1-  Aller à google map

La première étape consiste à aller dans le menu google situé à l’angle gauche de votre page et sélectionner la carte (Maps) ou aller directement dans Google Maps.

 2- Rechercher votre adresse

Cette deuxième partie consistera à mettre votre adresse dans la barre de recherche. Attention à mettre une adresse exacte avec le bon nom et numéro de rue.

3- Trouver votre annonce

Il s’agira ici de cliquer sur la liste déroulante se situant à gauche de votre écran sous le bouton recherche. Puis, toujours dans cette partie gauche, vous pourrez trouver le lien du code d’intégration.

4- Personnaliser votre carte intégrée

A ce stade, un écran apparaîtra avec de nombreuses options afin que vous puissiez personnaliser votre carte. Vous pourrez, choisir la taille de la carte que vous voulez sur votre site web. Puis visualiser un aperçu.

Lorsque vous aurez terminé toutes ces étapes, en haut de la zone du widget vous trouverez le “code ifram”, copier/coller à l’endroit où vous voulez sur le site web. Félicitations, vous venez d’intégrer dans ce dernier une carte Google Maps.

Pour ceux ayant une connaissance en JavaScript, en HTML et CSS, il serait plus aisé pour vous de passer par ces trois points : créer une page HTML, ajouter une carte avec un marqueur, obtenir une clé d’API.

1- Créer une page HTML

En ouvrant l’échantillon de code, vous remarquerez qu’il y a deux boutons dans le coin supérieur droit. Le plus à gauche vous permettra d’ouvrir l’échantillon dans JSFiddle.

2- Ajouter une carte avec un marqueur

Répéter le même processus pour pouvoir ouvrir l’échantillon dans le JSFiddle. A cette étape, vous pourrez aisément charger Google Maps JavaScript API sur votre page Web et écrire votre propre JavaScript car utilisant l’API pour ajouter une carte affichant un marqueur.

3- Obtenir une clé d’API

Après les deux étapes précédentes, vous pourrez à présent authentifier votre application sur Google Maps JavaScript API. Il faudra maintenant créer votre clé d’API. Cela facilitera l’affichage de votre carte Google Maps sur votre site web.

Voilà nous venons de passer en revue les différentes étapres nécessaires à l’intégration d’un lien Google Maps sur son site web. Une fois que vous aurez géolocaliser votre entreprise, vous faciliterez la vie à vos prospects et clients qui pourront désormais vous trouver facilement en suivant tout simplement les indications fournis par Google map sur leur smartphone.