How to Embed Bing Maps in WordPress

Do you wish to embed Bing Maps in your WordPress web site? In case you are on the lookout for a Google Maps different, then Bing Maps is the best candidate for you.

Much like Google Maps, you need to use Bing Maps to point out instructions, visitors, routes, and navigation directions in your WordPress website. Since it’s owned by Microsoft, it’s a nice map software with a ton of helpful information.

On this article, we are going to present you find out how to simply embed Bing Maps in WordPress, step-by-step.

Including Bing Maps in WordPress (No Plugin Required)

Very first thing it’s good to do is go to Bing Maps web site and seek for the situation or map you wish to embed.

After getting discovered the situation, click on on the ‘Extrachoice with three-dots icon, and choose ‘Embed a map’ choice.

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

You may select map dimension, map kind (static or draggable map), map fashion (highway or aerial), and map hyperlinks. Evaluate the customization choices after which click on on the Generate Code.

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

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

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

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

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.

Including Bing Maps Utilizing a Plugin

If it’s good to embed just one map in your web site, then the handbook methodology proven above is the most suitable choice.

Nonetheless in case you run a web site the place you typically want so as to add maps, then utilizing a plugin so as to add Bing Maps could be simpler.

Very first thing it’s good 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 find out 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 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 Heart web site. If you have already got a Microsoft account, then you’ll be able to merely register together with your account credentials.

After getting signed into your account, it’s good to click on on the ‘My Account’ menu and choose ‘My Keys’ choice.

On the following display, it’s good to fill out your web site info to create a key.

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

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

After that, it’s good 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 discipline.

Don’t overlook to avoid wasting your plugin settings.

After that, it’s good to add marker classes by visiting Final Maps by Supsystic » Marker Classes » Add Class.

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 in your map, outline the width and top of the map, select navigation bar mode, and many others.

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

Subsequent, scroll down and configure extra choices beneath. As soon as finished, click on on the ‘Save Map’ button beneath 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 in your maker.

You need to 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 wish to present a few of the finest schools 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 in your new marker. Subsequent, it’s good to enter the handle to level the marker. And, additionally choose the marker class.

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

You may add extra markers by following the identical steps.

As you add the markers, you’ll be able to preview them reside on the preview field. As soon as you might be completely satisfied together with your map, navigate to the ‘Map shortcode’ choice on the prime, and duplicate the shortcode.

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

You May Also Like : How To Fix “Failed To Load Resource” Error In WordPress

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

Now it’s good to paste the Bing map shortcode that you simply copied earlier than.

As soon as finished, save or publish your web page, and preview how the Bing map appears to be like in your web site.

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

We hope this text helped you to learn to embed Bing Maps in WordPress simply. You might also wish to see our information on find out how to embed precise tweets in WordPress weblog posts

If you liked this article, make sure to hit the bell for getting our latest updates and share this article with your friends in every social media platforms.

1 thought on “How to Embed Bing Maps in WordPress”

  1. Pingback: How to Disable PHP Execution in Certain WordPress Directories

Leave a Comment

Your email address will not be published. Required fields are marked *