Comment intégrer une carte Google Maps sur son site Web

Comment intégrer une carte Google Maps sur son site Web

Intégration du code Google Maps

Il peut être très intéressant d’ajouter une carte interactive dans la page de contact d’un site Internet.

En plus de donner une information précise sur votre adresse, elle offre la possibilité au lecteur de calculer son trajet, de  découvrir l’environnement du lieu grâce à Street View ou même de récupérer les coordonnées GPS du lieu.

Mais il n’est pas toujours facile de s’y retrouver quand les éditeurs décident de mettre à jour leurs outils, c’est le cas avec Google maps dont l’intégration d’une carte était accessible très facilement dans l’ancienne version.

il suffisait de cliquer sur les maillons à droite de l’adresse saisie pour avoir accès au code d’insertion.

integrer une carte google maps ancienne version (Personnalisé)

Pour revenir à l’ancienne version cliquer sur le point d’interrogation…

Dans la nouvelle version de Google Maps

Pour récupérer le code d’intégration dans la nouvelle version de Google Maps,  commencez par rechercher le lieu en saisissant son adresse et validez.

Dans l’exemple Alisé Région Centre à Châteauroux

integrer une carte google maps 1 (Personnalisé)

Les équipe de Google auraient pu nous mettre un lien d’accès rapide directement dans la fenêtre qui vous propose de calculer l’itinéraire, mais non, il faut se rendre dans le bas de la fenêtre et cliquer sur la roue dentée (paramètres) comme dans l’image ci-dessous.

integrer une carte google maps 2

Vous verrez apparaître le lien “Partager et intégrer a carte”

Dans la fenêtre suivante vous pourrez personnaliser le lien d’intégration de voter carte Google Maps en sélectionnant les tailles prédéfinies ou saisir les dimensions les plus adaptées à votre site.

integrer une carte google maps 3a

Il ne vous reste plus qu’à copier / coller le  code fourni.

Et voilà le travail 🙂

 

Intégrer une carte Google dans un site responsive

Atention pour intégrer une carte Google Maps dans un site responsive il faut adapter le code fourni en remplaçant la valeur de la largeur donnée en pixel pour la passer en pourcentage.

Pour aller plus loin, il est aussi possible de personnaliser la carte mais ceci fera certainement l’objet d’une autre publication.

4 thoughts on “Comment intégrer une carte Google Maps sur son site Web”

  1. Merci pour toutes ces infos ! Je cherchais à mettre une carte Google Maps sur mon blog, et cela fonctionne !

    Par contre j’ai deux petites questions :

    1) Sur mon blog, sous ma carte j’ai une mention « View Larger Map ». Quand on clique dessus, sur ordinateur cela fonctionne (on est envoyé vers le site web google maps), mais sur mon téléphone je tombe sur : « The Google Maps Embed API must be used in an iframe ». Qu’est-ce que cela veut dire ?
    Je précise que je ne suis pas douée du tout en informatique ! ^^ S’il n’y a pas d’option simple pour régler le problème, est-ce possible de supprimer cette mention ?

    2) J’ai donc réalisé l’intégration de la carte maps sur mon ordi, mais est-il possible de faire pareil via mobile (Android) ? Si oui, comment récupérer le code html/le lien de partage de ma carte Google Maps ?

    Merci !

    1. le point rouge est présent automatiquement lorsque le lieu est déjà référencé par Google, sinon il faut passer par l’application Google Maps Engine. Il est possible de personnaliser cette puce.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *