Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Embed Bing Maps in WordPress (Step by Step)

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.

How to embed Bing Maps in WordPress

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.

An example of an embedded Bing map

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 jump straight to the method you want to use:

Method 1: Adding Bing Maps in WordPress (Best For Single Maps)

Many business owners simply want to add a map to their contact form or About Us page. If you just want to add a single map to your website, then you can use an embed code.

Simply head over to Bing Maps and search for the location or map that you want to use. Once you’ve found the right location, click on the three-dots icon, and select ‘Embed a map.’

Embed a Map option in Bing Maps

Bing will now open a new tab where you can customize the map by changing its size, map type (static or draggable map), map style (road or aerial), and more.

As you make changes, the preview will update automatically, so you can try different settings to see what looks the best.

Customize Bing Map to Embed in WordPress site

When you are happy with how the map is set up, click on the ‘Generate Code’ button.

Bing Maps will then show a code snippet. Go ahead and copy the code, as you’ll need it in the next step.

generated Embed Code for Bing Maps

Now, switch back to your WordPress site and open the post or page where you want to add the map.

Then, click on the ‘+’ icon and start typing ‘custom HTML.’

Embedding a Bing map using a custom HTML block

When the right block appears, just click to add it to the page.

Once you’ve done that, simply paste the embed code into the custom HTML block.

Bing Map Embed Code Added in WordPress Editor

You can now click on either the ‘Update’ or ‘Publish’ button to make the map live on your online store or website.

Method 2: Adding Bing Maps Using a Plugin (Best For Embedding Multiple Maps)

If you only need to add one map, then the embed code is a good solution. However, this method can take a lot of time and effort if you need to add multiple Bing Maps.

For example, if you run a business directory, then you may need to add a map to every single page. In this case, we recommend using Ultimate Maps by Supsystic as it makes it easy to embed Bing maps, Leaflet maps, and other Google Maps alternatives.

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.

Sign in to Bing Dev Center

After signing into your account, click on the ‘My Account’ menu.

Then, select ‘My Keys.’

Bing Maps Dev Center My keys Option

On the next screen, you need to fill out your WordPress blog or website information.

Then, click on ‘Create.’

Create Bing Map API key to Embed in WordPress

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.

Bing Maps API Key Created

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.’

How to add a Bing Map to your WordPress website

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.

Adding a Bing Map API key to your WordPress website

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.’

Adding marker categories in WordPress

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.’

Adding Bing marker categories to a WordPress website

To create more categories, simply click on the ‘Add Category’ button.

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.

Add Bing map using a plugin

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.

Choosing a location for a Bing map

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.’

Saving a custom Bing 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.

Add new Marker for Bing Map in WordPress

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.

Adding markers to a Bing map in WordPress

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.

Save Marker for Bing Maps

As you add markers, the map preview will update automatically.

When you’ve finished customizing the map, copy the shortcode next to ‘Map shortcode.’

Copy Bing Map Shortcode to embed in WordPress

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.’

Adding a shortcode in WordPress

When the right block shows up, click to add it to the page.

Now, simply paste the Bing Map shortcode into the block.

Paste BIng Map Embed Shortcode in WordPress Page Editor

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.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

  1. 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!

  2. 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.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.