Search engines have become the primary source of information for the connected population of the world. Google is undoubtedly the most popular in the world but there are other services too which enjoy significant following in some locations. Bing is one such service which is used by many people in North America, especially in the US.
Besides providing facilities for searching for images and videos, another helpful feature offered by these services is maps. In this tutorial, we are discussing the ways to add Bing Maps to WordPress websites. This will help visitors in easily finding a convenient route to your business’ physical location. We are presenting two methods for embedding the map in your interface. You can choose one which you find more convenient.
Quick Guide to Add Bing Maps To WordPress Websites
1. Adding Bing Maps Manually
First, we will discuss the method to add Bing Maps manually into a WordPress website. The following steps will help complete the process:
i. Find Your Location On Bing Map
In the first step, you will need to find the location on Bing Maps, which you want to display on your interface. Go to the website of the service and you will find the link for Maps right on top of the homepage. Click on it to go to the maps page. Enter your location in the search bar on the top and click the search icon.
The search engine will now show the location with a pin on the map. On the left-hand side, you can see the name of the location along with options for directions or sharing, in a box. Make sure that the correct location is being displayed on the map and then move to the next step.
ii. Generate Code for Embedding
We will now have to generate a code which will be needed for embedding the map in a web page. Locate the More option with the three-dot icon alongside the search bar on top of the screen. Hover the cursor over it and then choose the Embed a map option.
This will open a new tab in which you will be shown the map along with a list of customization options. You can choose the size of your navigational aid. There is also the option of displaying a static or draggable map. Users can pick either road or aerial as the style of their map. Make the modifications and then hit the Generate Code button.
You will now be shown a code snippet. Copy it and then move to the next step.
iii. Embed the Map In A Page
In this step of our guide to add Bing Maps to WordPress, we will now embed our selected map. Access the dashboard of your website and open the page where you want to make the addition in the editor. Hover the cursor over the Add New Block icon, scroll to Formatting and then choose the Custom HTML block. Paste the code that you copied in the previous step in the HTML field.
Save or publish the page and the map will now be added to your chosen page.
2. Embedding Bing Maps Through A Plugin
We will now show the way to do the embedding with a plugin. People who have converted HTML to WordPress theme or migrated from other platforms will like this method as it does involve any coding.
i. Install The Required Plugin
You can easily find a WordPress plugin for every possible functionality. Embedding a map in a website can be done through maps plugins. The toll that we have chosen for this tutorial is called Ultimate Maps by Supsystic. It is a5-star rated product which helps users looking for alternatives to Google Maps. log in to your admin dashboard and go to Plugins > Add new. Search for the tool and then locate it by using the image given here as a reference.
Activate the tool on your interface and proceed forward.
ii. Generate The Bing Maps API Key
In order to conduct the process with the plugin, we will need the Bing Maps API key. Go to the Bing Maps Dev Center website and sign in with your Microsoft account. In case, you do not have an account, you will need to create one. Sign in to your profile and click on the My Account menu. Then choose the My Keys option.
Provide the necessary information on the next screen and then hit the Create button to generate the key.
Use the Copy Key link to copy the key.
iii. Configure Plugin Settings
Go to your WordPress dashboard and then visit Ultimate Maps by Supsystic > Settings. Select your map Engine as Bing Microsoft and paste the API key in the specified field. Save your settings.
Select the Add Map tab to create the map for embedding. Define the dimensions of the map and select a navigation mode. You can also provide a name for the chart. There are also options for making the map draggable or introducing the double-click to zoom feature. Do not forget to enter the location in the Map Centerfield.
You can select the Markers tab to include pins on landmarks in your map. Once you have made all the modifications, check their preview and go to the Map shortcode option and copy the shortcode.
iv. Add The Map To A Page
Just as in the earlier method, open the page where the map will be added in your editor. Hover over the Add New Block icon, scroll to Widgets and choose the Shortcode block. Paste the shortcode which we copied in the previous step.
Save or publish the page to complete the embedding process.
Conclusion
These are two quick and easy ways for adding Bing Maps to a WordPress interface. If you feel that you are not up to the task, then you can outsource the work to a WordPress web development company and relax.
