Intégrer une carte Google Maps responsive à votre site WordPress sans plugins

 S'abonner

google map

Une carte Google Maps décrivant l’emplacement de son entreprise peut être un élément intéressant à intégrer à son site Web. Comme beaucoup de gens utilisent leur téléphone cellulaire, il faut donc que la carte puisse s’adapter aux différents formats d’écran.

Obtenir le code d’une carte avec Google Maps

Pour obtenir les coordonnées de son entreprise, il faut procéder comme suit:

  1. Cliquez sur Google Maps et inscrivez l’adresse de votre entreprise.
  2. Cliquez sur le menu puis sur Partager ou intégrer la carte.
  3. La fenêtre « Partage » s’ouvre. Cliquez sur Intégrer une carte.
  4. Sélectionnez la taille puis cliquez sur COPIER LE CONTENU HTML. Le code ressemblera à ceci:  <iframe src= »https//… » width= »560″ height= »315″ frameborder= »0″ style= »border:0″ allowfullscreen></iframe>
  5. Ajoutez ce code à l’endroit désiré dans la page HTML.

Obtenir le code d’une carte personnalisée avec MY MAPS

Il est possible de se créer une carte permettant de montrer une adresse unique et même un itinéraire. Voici une autre façon de procéder pour obtenir le code d’une carte personnalisée:

  1. Allez sur la page MY MAPS.
  2. Cliquez sur Créer une carte.
  3. Cliquez sur Carte sans titre. Une fenêtre apparaît et vous pouvez changer le titre et la description de la carte.
  4. Par défaut, un calque a déjà été créé. Cliquez sur le titre pour le changer. Un calque peut être un ensemble de lieux comme les bonnes adresses de lieux à visiter.
  5. Ajoutez une adresse au calque en inscrivant le lieu ou l’adresse dans la barre de recherche. Cela crée un marqueur et un point dessus en cliquant sur le +Ajouter à la carte. Le pot de peinture permet de changer la couleur de l’icône. On peut également ajouter une image ou un vidéo (appareil photo) et un itinéraire vers ce lieu.
  6. Il est possible d’ajouter d’autres calques en cliquant sur Ajouter un calque à gauche.
  7. Cliquez sur Partager. Changez l’accès Privé par Public. Cliquez sur les 3 points en haut à gauche (zone de la carte) et sélectionner Intégrer la carte à mon site. Collez ce code à l’endroit désiré.

Adapter la carte aux formats d’écran avec Boostrap

Intégrer une carte est relativement facile mais il faut aussi qu’elle soit responsive c’est-à-dire qu’elle doit s’adapter aux différents formats d’écran. Tout d’abord, les propriétés width= »560″ height= »315″ frameborder= »0″ style= »border:0 »  doivent être enlevés car elles sont inutiles. Puis, on ajoute des classes prédéfinies de Bootstrap comme suit:

<div class="embed-responsive embed-responsive-16by9">< iframe class="embed-responsive-item" src="https//..." allowfullscreen></iframe></div>

La classe embed-responsive-16by9 sert à établir le ratio de la carte. Il y en a d’autres si vous voulez  obtenir un ratio différent comme par exemple:

  • embed-responsive-21by9
  • embed-responsive-4by3
  • embed-responsive-1by1

Si on n’utilise pas Bootstrap, on peut toujours se créer des classes et les ajouter aux mêmes endroits.

 

Référence:

https://getbootstrap.com/docs/4.1/utilities/embed/

https://www.google.com/intl/fr_ca/maps/about/mymaps/

 


Laisser un commentaire

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