WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Embed Bing Maps in WordPress

How to Embed Bing Maps in WordPress

Last updated on July 5th, 2019 by Editorial Staff
199 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Embed Bing Maps in WordPress

Do you want to embed Bing Maps on your WordPress website? If you are looking for a Google Maps alternative, then Bing Maps is the right candidate for you.

Similar to Google Maps, you can use Bing Maps to show directions, traffic, routes, and navigation instructions on your WordPress site. Since it is owned by Microsoft, it is a great 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

Adding Bing Maps in WordPress (No Plugin Required)

First thing you need to do is go to Bing Maps website and search for the location or map you want to embed.

Once you have found the location, click on the ‘More’ option with three-dots icon, and select ‘Embed a map’ option.

Embed a Map option in Bing Maps

After that, it will open a new tab where you can customize the map to embed in your website.

Customize Bing Map to Embed in WordPress site

You can choose map size, map type (static or draggable map), map style (road or aerial), and map links. Review the customization options and then click on the Generate Code.

After that, it will provide you a code snippet. Go ahead and copy the code because you’ll need it in the next step.

generated Embed Code for Bing Maps

Now, switch back to your WordPress site and create a new page or edit an existing one where you want to add the map.

On the page edit screen, click on the Add New Block icon and select the Custom HTML block.

Add Custom HTML block in WordPress Page Editor

After that, paste the Bing Map embed code that you copied earlier in the HTML field.

Bing Map Embed Code Added in WordPress Editor

You can now save or publish your page and click on the preview button to see the map embedded in your page. Here is how the Bing Map appeared on our demo website.

Bing Map Embedded in WordPress Manually -preview

Adding Bing Maps Using a Plugin

If you need to embed only one map on your website, then the manual method shown above is the best option.

However if you run a website where you often need to add maps, then using a plugin to add Bing Maps would be easier.

First thing you need to do is install and activate the Ultimate Maps by Supsystic plugin. For detailed instructions, you can see our step by step guide on how to install a WordPress plugin.

It is a free WordPress map plugin that lets you embed Bing maps, Leaflet maps, and other Google Maps alternatives in your WordPress blog.

To use this plugin with Bing maps, you will need to have a Bing Map API Key.

Simply create an account on Bing Maps Dev Center website. If you already have a Microsoft account, then you can simply sign in with your account credentials.

Sign in to Bing Dev Center

Once you have signed into your account, you need to click on the ‘My Account’ menu and select ‘My Keys’ option.

Bing Maps Dev Center My keys Option

On the next screen, you need to fill out your website information to create a key.

Create Bing Map API key to Embed in WordPress

After that, you can see a message ‘Key created successfully’ and the key details in a box.

Bing Maps API Key Created

You can simply click on the ‘Copy key’ link or ‘Show key’ link and copy the Bing Maps API key.

After that, you need to paste the key in your plugin settings.

Visit Ultimate Maps by Supsystic » Settings from your dashboard and select ‘Bing Microsoft’ as your maps engine. After that, paste the API key you copied earlier in the Bing Maps API key field.

Paste your Bing Maps API key in Ultimate Maps by Supsystic plugin settings

Don’t forget to save your plugin settings.

After that, you need to add marker categories by visiting Ultimate Maps by Supsystic » Marker Categories » Add Category.

Add Marker Categories for Bing Maps

Create as many marker categories as you need.

Next, click on the Add Map menu to create a new map. Enter a name for your map, define the width and height of the map, choose navigation bar mode, etc.

Add Bing map using a plugin

You can also configure options to make the map draggable, use double click to zoom, and more. Most important of all, enter the location to display in the map center.

Next, scroll down and configure more options below. Once done, click on the ‘Save Map’ button below the map preview box.

After that, you can add markers to show the main location points in your map. Click on the Markers tab, and then add a name for your maker.

Add new Marker for Bing Map in WordPress

You can use the name of the place or organization as a marker name.

For example, we used ‘University of Florida’ as a marker name because we want to show some of the best colleges in Florida in our demo map.

After that, you can add marker description text as well as image.

Scroll down and choose an icon for your new marker. Next, you need to enter the address to point the marker. And, also select the marker category.

Save Marker for Bing Maps

Review all the other options, and then click the ‘Save Marker’ button.

You can add more markers by following the same steps.

As you add the markers, you can preview them live on the preview box. Once you are happy with your map, navigate to the ‘Map shortcode’ option at the top, and copy the shortcode.

Copy Bing Map Shortcode to embed in WordPress

After that, create a new page or edit an existing one to embed your new Bing map.

Once in the page editor, click on the Add New Block icon and choose the Shortcode block under Widgets section.

Add Shortcode Block in WordPress

Now you need to paste the Bing map shortcode that you copied before.

Paste BIng Map Embed Shortcode in WordPress Page Editor

Once done, save or publish your page, and preview how the Bing map looks on your website.

Here is how the embedded Bing map appeared on our demo website.

Bing Map Embedded in WordPress using a Plugin

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 embed actual tweets in WordPress blog posts.

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.

199 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

3 Comments

Leave a Reply
  1. GODZILLA491 says:
    Jul 28, 2014 at 9:28 am

    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.

    Reply
  2. WPBeginner Staff says:
    Jun 16, 2014 at 9:02 pm

    We have a video tutorial for that on our YouTube Channel, don’t forget to subscribe:

    http://www.youtube.com/watch?v=JDCoOOLCmQg

    Reply
  3. Anita says:
    Jun 16, 2014 at 9:14 am

    how do I find a video on adding google maps

    Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
InMotion Hosting
InMotion Hosting Coupon
Get an exclusive 50% off InMotion hosting plus a free domain.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.