Que vous gériez une entreprise, une organisation, un événement, ou que vous ayez simplement besoin de présenter une carte pour toute autre raison, il peut être utile de savoir comment ajouter Google Maps à WordPress.
De plus, avec le bon plugin, vous pouvez même créer des cartes personnalisées et interactives qui mettent mieux en valeur votre emplacement physique ou d’autres informations importantes.
Introducing the Otter Blocks Google Maps Block
Blocs et bibliothèque de modèles Gutenberg par Otter
La façon la plus simple d’ajouter Google Maps à WordPress est d’utiliser le bon plugin, comme Otter Blocks. Themeisle a construit ce plugin pour aider les utilisateurs à créer rapidement et à personnaliser les cartes en fonction de leurs besoins. Le puissant constructeur de cartes de l’interface utilisateur vous permet de créer autant de cartes que vous le souhaitez, ainsi que de les enregistrer, de les modifier et même de les cloner.
Caractéristiques principales:
- Personnalisez de nombreux éléments de vos cartes, notamment la position, le niveau de zoom et bien plus encore.
- Stylez vos cartes grâce à des schémas de couleurs et d’autres options.
- Ajoutez plusieurs lieux et marqueurs à vos cartes.
- Organisez facilement une bibliothèque de vos cartes.
Prix : Otter Blocks est gratuit.
Comment ajouter Google Maps à WordPress (en 3 étapes)
Maintenant, nous allons vous montrer comment créer une carte pour votre site Web. Tout d’abord, vous voudrez installer Otter Blocks sur votre site WordPress comme vous le feriez pour tout autre plugin. Ensuite, il suffit de suivre les étapes ci-dessous pour ajouter Google Maps à WordPress!
Etape 1 : Ajouter votre clé API Google Maps à WordPress
Une fois que vous avez installé Otter Blocks, il y aura une nouvelle section appelée Otter sous l’onglet Paramètres dans votre tableau de bord. Lorsque vous la visitez, vous devriez voir une section Maps avec une case pour votre clé API, qui doit être ajoutée avant de commencer à créer des cartes :
Pour obtenir cette clé, visitez le tableau de bord des API Google. En supposant que vous avez déjà un compte Google, vous devriez être en mesure d’accéder à ce tableau de bord sans avoir besoin de vous inscrire à quoi que ce soit.
Dans le tableau de bord des API Google, sélectionnez le bouton bleu Créer un projet situé près du haut de la page :
Choisissez Créer sur l’écran suivant. Vous pourrez alors choisir un nom pour votre projet :
Cliquez une nouvelle fois sur Créer, et vous serez ramené au tableau de bord. Sélectionnez Activer les API et les services près du haut de l’écran et recherchez dans la bibliothèque d’API » Google Maps JavaScript API « . Une fois que vous l’avez trouvée, sélectionnez Enable:
Sur l’écran suivant, cliquez sur le bouton Créer des informations d’identification dans le coin supérieur droit.
Puis sur la page suivante, sélectionnez Quelles informations d’identification me faut-il ? Une clé d’API vous sera présentée, que vous pouvez maintenant copier.
Retournez sur votre site WordPress et collez la clé dans le champ Clé API Google Maps :
N’oubliez pas d’enregistrer vos modifications ! Maintenant, vous êtes prêt à commencer à construire votre carte.
Etape 2 : créer une nouvelle carte
Pour créer votre première carte, sélectionnez le bloc Google Maps dans la section Otter. De nombreuses options vous seront immédiatement présentées :
La première chose que vous voudrez probablement faire est de sélectionner le bouton Ajouter un marqueur. Cela vous permet de déterminer un emplacement pour la carte et de placer un marqueur. Vous pouvez donner un titre au marqueur, choisir un style pour celui-ci et entrer une adresse :
Dans la zone de texte, vous pouvez également ajouter et formater le texte qui s’affichera lorsqu’un utilisateur cliquera sur le marqueur :
Après cela, vous pouvez commencer à personnaliser votre carte en utilisant certaines des autres options du constructeur de cartes. Parcourons chaque onglet un par un.
Positionnement & Zooming
Pour définir un certain niveau de zoom et de position pour votre carte, vous pouvez simplement zoomer et dézoomer l’échantillon de carte et le faire glisser où vous le souhaitez. La façon dont vous la configurez dans l’éditeur est celle qui s’affichera sur votre site.
Vous pouvez également changer le type de carte, entre terrain, satellite, route ou hybride.
Contrôles
Dans la section Contrôles, vous pouvez décider quel type de choix est disponible pour les utilisateurs. Il s’agit notamment de savoir s’ils peuvent faire glisser la carte et s’ils ont une option de vue de la rue.
Styles
Dans la section Styles, vous pouvez peaufiner l’aspect de votre carte. Vous pouvez également choisir parmi plusieurs styles de carte prédéfinis ou même créer le vôtre.
Cependant, en modifiant les paramètres ci-dessus, vous devriez être en mesure de créer une carte à la fois élégante et utile pour vos visiteurs.
Etape 3 : Placez la carte sur votre site
Une fois que votre carte est réglée à la perfection, n’oubliez pas de l’enregistrer. Une fois que vous l’aurez fait, vous la verrez apparaître sur la page, ainsi que des boutons pour affiner la largeur, modifier les styles ou supprimer la carte.
Cliquez sur publier et c’est tout ! Votre carte s’affiche désormais parfaitement sur le front-end de votre site :
Vous pouvez utiliser cette méthode pour placer la même carte à plusieurs endroits ou même ajouter une variété de cartes sur votre site. C’est tout ce qu’il faut pour ajouter Google Maps à WordPress.
Conclusion
« Montrer, ne pas dire » est une règle intelligente à suivre sur votre site Web. Inclure une carte, par exemple, montre aux visiteurs exactement comment votre entreprise ou organisation s’intègre dans leur communauté. Les cartes sont un moyen plus convaincant d’encourager les gens à visiter votre emplacement physique que de simplement fournir une adresse – surtout lorsqu’elles sont interactives.
Pour profiter de cette technique sur votre propre site, vous pouvez utiliser le plugin Otter Blocks pour ajouter Google Maps à WordPress. Il suffit de suivre ces trois étapes :
- Ajouter votre clé API Google Maps à WordPress.
- Créer une nouvelle carte et la configurer à l’aide des paramètres du plugin.
- Placer la carte sur votre site à l’aide du shortcode fourni.
.
0 commentaire