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? In case you are on the lookout for a Google Maps different, then Bing Maps is the precise candidate for you.

Just like Google Maps, you need to use Bing Maps to point out instructions, 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 the way 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 could do is go to Bing Maps web site and seek for the placement or map you need to embed.

After you have 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’s 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 dimension, map sort (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’s 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, change again to your WordPress web site and create a brand new web page or edit an current 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 subject.

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 could embed just one map in your web site, then the handbook methodology proven above is the most suitable choice.

Nevertheless when 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 could 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 the way to set up a WordPress plugin.

It’s a free WordPress map plugin that allows 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’ll need 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.

Sign in to Bing Dev Center

After you have signed into your account, you could click on on the ‘My Account’ menu and choose ‘My Keys’ possibility.

Bing Maps Dev Center My keys Option

On the subsequent display screen, you could fill out your web site info 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 could 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 subject.

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

Don’t neglect to avoid wasting your plugin settings.

After that, you could 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 to your map, outline the width and top of the map, select navigation bar mode, and so forth.

Add Bing map using a plugin

It’s also possible to 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 beneath. As soon as accomplished, 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 principle location factors in your map. Click on on the Markers tab, after which add a reputation to 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 few of the greatest 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 to your new marker. Subsequent, you could enter the deal with 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 completely satisfied 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 current 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 underneath Widgets part.

Add Shortcode Block in WordPress

Now you could paste the Bing map shortcode that you simply copied earlier than.

Paste BIng Map Embed Shortcode in WordPress Page Editor

As soon as accomplished, 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 discover ways to embed Bing Maps in WordPress simply. You might also need to see our information on the way to embed precise tweets in WordPress weblog posts.

When you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.

Comments (0)

Leave a Reply

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