Vous souhaitez intégrer Bing Maps sur votre site WordPress ? Si vous recherchez une alternative à Google Maps, Bing Maps est le bon candidat pour vous.

Semblable à Google Maps, vous pouvez utiliser Bing Maps pour afficher les directions, le trafic, les itinéraires et les instructions de navigation sur votre site WordPress. Comme il appartient à Microsoft, il s'agit d'une excellente application cartographique avec une tonne de données utiles.

Dans cet article, nous allons vous montrer comment intégrer facilement Bing Maps dans WordPress, étape par étape.

Comment intégrer Bing Maps dans WordPress

Ajout de cartes Bing dans WordPress (aucun plugin requis)

La première chose que vous devez faire est d'aller sur Cartes Bing site Web et recherchez l'emplacement ou la carte que vous souhaitez intégrer.

Une fois que vous avez trouvé l'emplacement, cliquez sur l'option « Plus » avec l'icône à trois points, puis sélectionnez l'option « Intégrer une carte ».

Intégrer une option de carte dans Bing Maps

Après cela, un nouvel onglet s'ouvrira dans lequel vous pourrez personnaliser la carte à intégrer à votre site Web.

Personnaliser Bing Map pour l'intégrer dans le site WordPress

Vous pouvez choisir la taille de la carte, le type de carte (carte statique ou déplaçable), le style de carte (routier ou aérien) et les liens cartographiques. Passez en revue les options de personnalisation, puis cliquez sur Générer le code.

Après cela, il vous fournira un extrait de code. Allez-y et copiez le code car vous en aurez besoin à l'étape suivante.

Code d'intégration généré pour Bing Maps

Maintenant, revenez à votre site WordPress et créez une nouvelle page ou modifiez-en une existante à laquelle vous souhaitez ajouter la carte.

Sur l'écran d'édition de la page, cliquez sur l'icône Ajouter un nouveau bloc et sélectionnez le bloc HTML personnalisé.

Ajouter un bloc HTML personnalisé dans l'éditeur de page WordPress

Après cela, collez le code d'intégration Bing Map que vous avez copié précédemment dans le champ HTML.

Code d'intégration de carte Bing ajouté dans l'éditeur WordPress

Vous pouvez maintenant enregistrer ou publier votre page et cliquer sur le bouton de prévisualisation pour voir la carte intégrée dans votre page. Voici comment la carte Bing est apparue sur notre site Web de démonstration.

Carte Bing intégrée manuellement dans WordPress - aperçu

Ajouter des cartes Bing à l'aide d'un plugin

Si vous avez besoin d'intégrer une seule carte sur votre site Web, la méthode manuelle présentée ci-dessus est la meilleure option.

Cependant, si vous gérez un site Web où vous avez souvent besoin d'ajouter des cartes, il serait plus facile d'utiliser un plugin pour ajouter Bing Maps.

La première chose que vous devez faire est d'installer et d'activer le Cartes ultimes par Supsystic brancher. Pour des instructions détaillées, vous pouvez consulter notre guide étape par étape sur la façon d'installer un plugin WordPress.

Il s'agit d'un plugin de carte WordPress gratuit qui vous permet d'intégrer des cartes Bing, des cartes Leaflet et d'autres alternatives Google Maps dans votre blog WordPress.

Pour utiliser ce plugin avec les cartes Bing, vous aurez besoin d'une clé API Bing Map.

Créez simplement un compte sur Centre de développement Bing Maps site Internet. Si vous avez déjà un compte Microsoft, vous pouvez simplement vous connecter avec les informations d'identification de votre compte.

Connectez-vous au centre de développement Bing

Une fois que vous êtes connecté à votre compte, vous devez cliquer sur le menu “Mon compte” et sélectionner l'option “Mes clés”.

Bing Maps Dev Center Option Mes clés

Sur l'écran suivant, vous devez remplir les informations de votre site Web pour créer une clé.

Créer une clé API Bing Map à intégrer dans WordPress

Après cela, vous pouvez voir un message “Clé créée avec succès” et les détails de la clé dans une boîte.

Clé API Bing Maps créée

Vous pouvez simplement cliquer sur le lien “Copier la clé” ou sur le lien “Afficher la clé” et copier la clé API Bing Maps.

Après cela, vous devez coller la clé dans les paramètres de votre plugin.

Visite Ultimate Maps par Supsystic » Paramètres depuis votre tableau de bord et sélectionnez “Bing Microsoft” comme moteur de cartes. Après cela, collez la clé API que vous avez copiée précédemment dans le champ Clé API Bing Maps.

Collez votre clé API Bing Maps dans les paramètres du plugin Ultimate Maps by Supsystic

N'oubliez pas de sauvegarder les paramètres de votre plugin.

Après cela, vous devez ajouter des catégories de marqueurs en visitant Ultimate Maps by Supsystic » Catégories de marqueurs » Ajouter une catégorie.

Ajouter des catégories de marqueurs pour Bing Maps

Créez autant de catégories de marqueurs que nécessaire.

Ensuite, cliquez sur le menu Ajouter une carte pour créer une nouvelle carte. Entrez un nom pour votre carte, définissez la largeur et la hauteur de la carte, choisissez le mode barre de navigation, etc.

Ajouter une carte Bing à l'aide d'un plugin

Vous pouvez également configurer des options pour rendre la carte déplaçable, utiliser un double-clic pour zoomer, etc. Le plus important de tous, entrez l'emplacement à afficher au centre de la carte.

Ensuite, faites défiler vers le bas et configurez plus d'options ci-dessous. Une fois cela fait, cliquez sur le bouton “Enregistrer la carte” sous la boîte de prévisualisation de la carte.

Après cela, vous pouvez ajouter des marqueurs pour afficher les principaux points de localisation sur votre carte. Cliquez sur l'onglet Marqueurs, puis ajoutez un nom pour votre créateur.

Ajouter un nouveau marqueur pour Bing Map dans WordPress

Vous pouvez utiliser le nom du lieu ou de l'organisation comme nom de repère.

Par exemple, nous avons utilisé « Université de Floride » comme nom de marqueur, car nous souhaitons afficher certains des meilleurs collèges de Floride sur notre carte de démonstration.

Après cela, vous pouvez ajouter un texte de description de marqueur ainsi qu'une image.

Faites défiler vers le bas et choisissez une icône pour votre nouveau marqueur. Ensuite, vous devez entrer l'adresse pour pointer le marqueur. Et, sélectionnez également la catégorie de marqueur.

Enregistrer le marqueur pour Bing Maps

Passez en revue toutes les autres options, puis cliquez sur le bouton “Enregistrer le marqueur”.

Vous pouvez ajouter d'autres marqueurs en suivant les mêmes étapes.

Au fur et à mesure que vous ajoutez les marqueurs, vous pouvez les prévisualiser en direct dans la zone de prévisualisation. Une fois que vous êtes satisfait de votre carte, accédez à l'option « Code abrégé de la carte » en haut et copiez le code abrégé.

Copier le code court Bing Map pour l'intégrer dans WordPress

Après cela, créez une nouvelle page ou modifiez-en une existante pour intégrer votre nouvelle carte Bing.

Une fois dans l'éditeur de page, cliquez sur l'icône Ajouter un nouveau bloc et choisissez le bloc Shortcode sous la section Widgets.

Ajouter un bloc de shortcode dans WordPress

Vous devez maintenant coller le shortcode de la carte Bing que vous avez copié auparavant.

Coller Bing Map Embed Shortcode dans l'éditeur de page WordPress

Une fois cela fait, enregistrez ou publiez votre page et prévisualisez l'apparence de la carte Bing sur votre site Web.

Voici comment la carte Bing intégrée est apparue sur notre site Web de démonstration.

Bing Map intégré dans WordPress à l'aide d'un plugin

Nous espérons que cet article vous a aidé à apprendre comment intégrer facilement Bing Maps dans WordPress. Vous pouvez également consulter notre guide sur la façon d'intégrer des tweets réels dans les articles de blog WordPress.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.