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.