Comment ajouter une iframe google maps avec plusieurs emplacements dans WordPress

Dans cet article, nous vous montrerons comment ajouter rapidement et facilement à votre site WordPress une iframe Google Maps avec plusieurs emplacements. Ce sera une tâche très facile et courte, mais si vous n’avez jamais fait cela auparavant, cet article est définitivement pour vous.

Nous créons des iframe avec google maps

Nous placerons notre carte en utilisant le plugin WPBakery, tandis que la carte elle-même sera dans le style <span= »font-family : ‘courier new’, courier, monospace ; background-color : #f0ebeb ; »><iframe/> tag. Vous pouvez placer cette balise n’importe où sur la page en utilisant n’importe quel outil et pas nécessairement dans WordPress. Dans ce tutoriel, je vous montrerai comment créer une structure pour placer une carte à l’aide de WPBakers, puis le processus de création de la carte elle-même.

Préparer une structure pour ajouter une carte google

La première étape consiste à créer un conteneur qui contiendra notre carte. Nous voulons que la carte soit en plein écran, donc nous ajoutons les propriétés Row avec Stretch row and content (no paddings).

Nous ajoutons maintenant une carte au conteneur créé en utilisant le widget intégré Google Maps.

Si nous avons déjà ajouté une carte google de base, nous passons à sa configuration.

Iframe avec la carte qui a maintenant été ajoutée par le plugin WPBakery contient un emplacement aléatoire et une balise. Notre objectif est de créer une carte pour toute la résolution de l’écran, qui contiendra plusieurs repères de localisation sélectionnés par nos soins.

Nous avons défini dans Map embed iframe width= »100% », pour maximiser la largeur de la carte, puis in height nous fixons la hauteur de notre carte dans notre cas, elle sera 600px.

Nous pouvons maintenant passer à la réalisation de notre propre carte.

Créer une carte avec plusieurs points de localisation en utilisant Google Maps Map Maker

Tout d’abord, nous devons être connectés à notre compte Google. Ensuite, nous allons sur le lien : https://www.google.com/maps/about/mymaps/

Cliquez sur le bouton « Essayer » et créez une nouvelle carte.

Saisissez l’endroit où vous souhaitez ajouter la balise – dans notre cas, ce sera Poznan.

Cliquez ensuite sur l’icône du marqueur et ajoutez le marqueur.

Nous ajoutons un autre marqueur avec la même option. Ensuite, allez à « Placez sur mon site » et copiez le code qu’il contient.

Collez notre iframe générée par Google, en vous souvenant de conserver la largeur et la hauteur de l’iframe précédente.

Nous obtenons la vue suivante sur la page :

Nous pouvons bien sûr influencer librement la carte affichée sur la page. Nous pouvons créer un itinéraire entre les lieux, changer leur nom et leur description, et nous pouvons modifier l’image de la carte et les couleurs des épingles.

Résumé

L’ajout d’une iframe de Google Maps à un site web est une chose triviale et très souvent utilisée sur les sites web. Cependant, tout le monde ne sait pas que nous pouvons créer de telles cartes en utilisant Google Maps Maker, qui nous offre plus d’options que l’outil de partage de base de Google Maps.

Je vous invite à visiter la liste de nos articles, où vous en apprendrez beaucoup plus sur WordPress et plus encore : Articles utiles.