How to Embed Bing Maps in WordPress

Like Tweet Pin it Share Share Email

Do you need to embed Bing Maps in your WordPress web site? If you’re in search of a Google Maps various, then Bing Maps is the appropriate candidate for you.

Just like Google Maps, you need to use Bing Maps to point out instructions, site visitors, routes, and navigation directions in your WordPress web site. Since it’s owned by Microsoft, it’s a nice map utility with a ton of helpful knowledge.

On this article, we’ll present you tips on how to simply embed Bing Maps in WordPress, step-by-step.

How to embed Bing Maps in WordPress

Including Bing Maps in WordPress (No Plugin Required)

Very first thing you might want to do is go to Bing Maps web site and seek for the placement or map you need to embed.

After getting discovered the placement, click on on the ‘Extra’ possibility with three-dots icon, and choose ‘Embed a map’ possibility.

Embed a Map option in Bing Maps

After that, it is going to open a brand new tab the place you’ll be able to customise the map to embed in your web site.

Customize Bing Map to Embed in WordPress site

You possibly can select map measurement, map sort (static or draggable map), map type (highway or aerial), and map hyperlinks. Evaluate the customization choices after which click on on the Generate Code.

After that, it is going to present you a code snippet. Go forward and duplicate the code since you’ll want it within the subsequent step.

generated Embed Code for Bing Maps

Now, swap again to your WordPress web site and create a brand new web page or edit an present one the place you need to add the map.

On the web page edit display screen, click on on the Add New Block icon and choose the Customized HTML block.

Add Custom HTML block in WordPress Page Editor

After that, paste the Bing Map embed code that you simply copied earlier within the HTML area.

Bing Map Embed Code Added in WordPress Editor

Now you can save or publish your web page and click on on the preview button to see the map embedded in your web page. Right here is how the Bing Map appeared on our demo web site.

Bing Map Embedded in WordPress Manually -preview

Including Bing Maps Utilizing a Plugin

If you might want to embed just one map in your web site, then the handbook technique proven above is the best choice.

Nevertheless in case you run an internet site the place you usually want so as to add maps, then utilizing a plugin so as to add Bing Maps could be simpler.

Very first thing you might want to do is set up and activate the Final Maps by Supsystic plugin. For detailed directions, you’ll be able to see our step-by-step information on tips on how to set up a WordPress plugin.

It’s a free WordPress map plugin that permits you to embed Bing maps, Leaflet maps, and different Google Maps alternate options in your WordPress weblog.

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

Merely create an account on Bing Maps Dev Middle web site. If you have already got a Microsoft account, then you’ll be able to merely register together with your account credentials.

Sign in to Bing Dev Center

After getting signed into your account, you might want to click on on the ‘My Account’ menu and choose ‘My Keys’ possibility.

Bing Maps Dev Center My keys Option

On the following display screen, you might want to fill out your web site data to create a key.

Create Bing Map API key to Embed in WordPress

After that, you’ll be able to see a message ‘Key created efficiently’ and the important thing particulars in a field.

Bing Maps API Key Created

You possibly can merely click on on the ‘Copy key’ hyperlink or ‘Present key’ hyperlink and duplicate the Bing Maps API key.

After that, you might want to paste the important thing in your plugin settings.

Go to Final Maps by Supsystic » Settings out of your dashboard and choose ‘Bing Microsoft’ as your maps engine. After that, paste the API key you copied earlier within the Bing Maps API key area.

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

Don’t overlook to save lots of your plugin settings.

After that, you might want to add marker classes by visiting Final Maps by Supsystic » Marker Classes » Add Class.

Add Marker Categories for Bing Maps

Create as many marker classes as you want.

Subsequent, click on on the Add Map menu to create a brand new map. Enter a reputation on your map, outline the width and peak of the map, select navigation bar mode, and so forth.

Add Bing map using a plugin

You may also configure choices to make the map draggable, use double click on to zoom, and extra. Most essential of all, enter the placement to show within the map heart.

Subsequent, scroll down and configure extra choices under. As soon as achieved, click on on the ‘Save Map’ button under the map preview field.

After that, you’ll be able to add markers to point out the primary location factors in your map. Click on on the Markers tab, after which add a reputation on your maker.

Add new Marker for Bing Map in WordPress

You should use the title of the place or group as a marker title.

For instance, we used ‘College of Florida’ as a marker title as a result of we need to present a number of the greatest faculties in Florida in our demo map.

After that, you’ll be able to add marker description textual content in addition to picture.

Scroll down and select an icon on your new marker. Subsequent, you might want to enter the tackle to level the marker. And, additionally choose the marker class.

Save Marker for Bing Maps

Evaluate all the opposite choices, after which click on the ‘Save Marker’ button.

You possibly can add extra markers by following the identical steps.

As you add the markers, you’ll be able to preview them stay on the preview field. As soon as you’re glad together with your map, navigate to the ‘Map shortcode’ possibility on the prime, and duplicate the shortcode.

Copy Bing Map Shortcode to embed in WordPress

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

As soon as within the web page editor, click on on the Add New Block icon and select the Shortcode block beneath Widgets part.

Add Shortcode Block in WordPress

Now you might want to paste the Bing map shortcode that you simply copied earlier than.

Paste BIng Map Embed Shortcode in WordPress Page Editor

As soon as achieved, save or publish your web page, and preview how the Bing map seems in your web site.

Right here is how the embedded Bing map appeared on our demo web site.

Bing Map Embedded in WordPress using a Plugin

We hope this text helped you to learn to embed Bing Maps in WordPress simply. You may additionally need to see our information on tips on how to embed precise tweets in WordPress weblog posts.

In the event you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Fb.