Do you want to embed Bing Maps in WordPress?
You can use Bing Maps to show directions, traffic, routes, and navigation instructions on your WordPress site. If you don’t want to use Google Maps, then Bing is a great alternative map application with a ton of useful data.
In this article, we will show you how to easily embed Bing Maps in WordPress, step-by-step.
Why Add Bing Maps in WordPress (And Not Google Maps)?
If you run a store, restaurant, salon, tourist attraction, or other physical business, then adding Bing Maps to your website will make it easier for customers to find you.
Potential customers can also get driving directions to your business and easily share your location with friends and family. Not only that but embedding Bings Maps can improve your WordPress SEO and make your site more visible in local searches.
When it comes to adding a map to WordPress, Google Maps may seem like the obvious choice, especially since they offer a Google Maps store locator.
However, in recent years Bing Maps has become more popular, and both services offer slightly different features, area coverage, and data. In particular, many people believe that Google Maps overestimates the time it takes to reach your destination.
If you are not happy with Google Maps or simply prefer Microsoft to Google, then Bing Maps is a great alternative.
With that being said, let’s see how you can add Bing Maps to your WordPress website. Simply use the quick links below to navigate through the steps:
Step 1: Install a Bing Map Plugin and Get Your API Key
Previously, you can embed a Bing map by generating an embed code from the platform. However, when we tried that method, it no longer works.
For that reason, now the easiest way to embed your Bing map on WordPress is using Ultimate Maps by Supsystic. This plugin makes it easy to embed Bing maps, Leaflet maps, and other Google Maps alternatives.
Plus, it’s also a good option if you run a business directory, where you may need to add a map to every single page.
The first thing you need to do is install and activate the Ultimate Maps by Supsystic plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.
To use this plugin with Bing Maps, you’ll need a Bing Map API Key.
To get this key, simply create an account in the Bing Maps Dev Center. If you already have a Microsoft account, then you can sign in with your Microsoft login information.
After signing into your account, click on the ‘My Account’ menu.
Then, select ‘My Keys.’
On the next screen, you need to fill out your WordPress blog or website information.
Then, click on ‘Create.’
After a few moments, you’ll see the message ‘Key created successfully.’
You can now click on ‘Show key’ and copy the Bing Maps API key, or simply click on the ‘Copy key’ link.
Step 2: Paste the API Key and Create Marker Categories
The next step is pasting the key into the plugin settings.
In your WordPress dashboard, you need to go to Ultimate Maps by Supsystic » Settings. Then, open the ‘Maps Engine’ dropdown and choose ‘Bing Microsoft.’
You can now go ahead and paste the API key into the ‘Bing Maps API Key’ field.
With that done, don’t forget to click on the ‘Save’ button.
After that, you may want to add marker categories. Similar to categories and tags in WordPress, these can help organize the points of interest on your map.
For example, if you are creating a map for tourists, then you might create categories such as ‘Accommodation,’ ‘Restaurants,’ and ‘Attractions.’
To create a category, just select the ‘Marker Categories’ tab and then click on ‘Add Category.’
You can now add a title, change the background and text color, and assign child categories to parent categories.
When you are happy with the information you’ve entered, click on ‘Save.’
To create more categories, simply click on the ‘Add Category’ button.
Step 3: Customize Your Bing Map
With that done, click on the ‘Add Map’ tab. You can now type in a name for the map, define its width and height, choose a navigation bar mode, and more.
You can also configure options to make the Bing Map draggable, use double click to zoom, and more.
Most important of all, in ‘Map Center’, type in the location you want to show. You can either type in the address or the longitude and latitude values.
There are lots of settings on this page, so it’s worth looking through all the options and making any necessary changes.
When you are happy with how the map is set up, just click on ‘Save Map.’
After that, you may want to highlight one or more locations on the map using markers.
To start, click on the Markers tab and then type in a name for the marker. Typically, you’ll want to use the name of the place or organization, but you can type in any name you want.
After that, you can add text and images to the marker description. You can also choose an icon for the marker.
With that done, you need to enter an address for the marker and select a marker category.
When you are happy with how everything is set up, click on ‘Save Marker.’
To add more markers, simply follow the same process described above.
As you add markers, the map preview will update automatically.
Step 4: Embed the Bing Map on Your WordPress Site
When you’ve finished customizing the map, copy the shortcode next to ‘Map shortcode.’
If you don’t see a shortcode, then make sure you’ve saved the map.
You can now open the page or post where you want to embed the Bing Map. Simply click on the ‘Add New Block ‘+’ icon and type in ‘Shortcode.’
When the right block shows up, click to add it to the page.
Now, simply paste the Bing Map shortcode into the block.
To make the map live, either click on the ‘Update’ or ‘Publish’ button. Now if you visit your website, you’ll see the Bing Map in action.
Learn More Ways to Embed Elements on WordPress
Do you want to embed other elements on your WordPress website besides a Bing map? Check out the articles below:
- How to Easily Embed Videos in WordPress Blog Posts
- How to Easily Embed iFrame Code in WordPress
- How to Embed PDF, Spreadsheet, and Others in WordPress Blog Posts
- How to Embed Actual Tweets in WordPress Blog Posts
- How to Embed a YouTube Playlist in WordPress (Best Method)
- How to Easily Embed Instagram in WordPress (Step by Step)
- How to Embed a Google Form in WordPress
- How to Embed a YouTube Live Stream in WordPress
- How to Embed Facebook Albums in WordPress (The Easy Way)
- How to Embed Medium Blog Posts on WordPress (Easy Way)
- How to Embed a Facebook Group Feed in WordPress
We hope this article helped you to learn how to embed Bing Maps in WordPress easily. You may also want to see our guide on how to create a WooCommerce popup to increase sales or our expert pick of the best live chat software for small businesses.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Thanks for the practical guide. So far I only had experience with google maps. I will definitely try to integrate BING maps as well, in order to test their functions and possibly also the loading speed.
Jiří Vaněk says
Thanks for the tip, I actually never thought of using maps other than Google. But I’m all about speed. Google Maps slows down page loading a lot. Are Bing and Microsoft better off?
WPBeginner Support says
The maps would require a similar amount of load time at the moment.
Admin
GODZILLA491 says
I don’t know why but it doesn’t work.
I found your tutorial after several minutes spent doing the same things you do but all i had is a blank post.
With google it works, but i need to use bing maps.
WPBeginner Staff says
We have a video tutorial for that on our YouTube Channel, don’t forget to subscribe:
http://www.youtube.com/watch?v=JDCoOOLCmQg
Anita says
how do I find a video on adding google maps