Ticker

6/recent/ticker-posts

Ad Code

Responsive Advertisement

How to Embed Bing Maps in WordPress

Introduction

If you are looking for a good instruction to help you embed Bing Maps in WordPress instead of Google Map, then this blog today is for you. With Bing Maps, you can freely and easily show the routes, traffic, directions, nagivation instructions and more. So, now, let’s explore it now!

Embed Bing Maps in WordPress without Plugin

First of all, let’s go to Bing Maps website and search the location/ map you need to embed to your WordPress site.

After you found the location you want, simply click on three-dots icon, then choose Embed a Map.

embed bing maps in wordpress 1

Now, there will be a new tab for you to edit the map. So, you can easily select the map size, map types, map styles and map links. After finishing the step, let’s press on the Generate Code button.

embed bing maps in wordpress 2

A Generated code popup will appear for you to copy the code snippet.

embed bing maps in wordpress 3

Next, let’s go back to your WordPress admin dashboard. After that, you just need to go to Pages -> Add New, then find the Custom HTML block.

embed bing maps in wordpress 4

You need to paste the code snippet you copied in the HTML field. Don’t forget to publish it.

embed bing maps in wordpress 5

So, now, you can see the Bing Map is displayed on your site.

embed bing maps in wordpress 6

Add Bing Maps by using a Plugin

If you just want to add only one map on your site, then the solution above is suitable for you. On the other hand, in case you want to add many maps regularly on your site, it’s a good idea for you to use a plugin to do that. Thus, we will showcase the way how to use a plugin to embed Bing Maps to your site.

Firstly, you need to install and activate Ultimate Maps By Supsystic plugin. In order to do that, let’s go to Plugins -> Add New -> search for the plugin on the search bar -> Install Now -> Activate.

embed bing maps in wordpress 7

Get Bing Map API Key

Now, you need to get Bing Map API key to add to your WordPress posts or page. Hence, let’s generate an account on Bing Maps Dev Center website. If you have already had an account, then simply sign in.

After signing in into your account, in the My Account tab, let’s choose My Keys.

embed bing maps in wordpress 8

There will be a table for you to create key. So, you just need to fill out the information such as Application name, Key type, Appilcation type. Then, click on the Create button.

embed bing maps in wordpress 9

You will see a message to ensure you created key successfully.

In the next step, in the box, you can click on Copy Key or Show Key to copy the Bing Maps API key.

embed bing maps in wordpress 10

Insert Bing Maps API Key to the plugin settings

Now, let’s come back to your admin dashboard. After that, simply open Ultimate Maps by Supsystic -> Settings.

In Maps Engine tab, you need to select Bing Microsoft. Moreover, in the Bing Maps API Key, you just need to paste the API key you copied before. Next, don’t forget to save all your settings.

embed bing maps in wordpress 11

Now, all you need to do is adding market categories. So, let’s go to Ultimate Maps by Supsystic -> Marker Categories -> Add Category.

You can freely generate many marker categories if you need.

embed bing maps in wordpress 12

In the next step, we will move on to Add Map section to generate a new map. Simply fill out the information including map name, width and height of the map, navigation bar more and so on.

Another important thing you need to do is type the location to showcase in the map center. Finally, let’s Save Map to store all your settings.

Furthermore, you can move on to Markers tab to add markers so that you can display the main location points in your Bing Map.

embed bing maps in wordpress 13

After fishing all settings, let’s save marker. Now, there will be a shortcode for you to copy and paste to posts or pages you want.

embed bing maps in wordpress 14

Next, you simply go to pages or posts you need to embed the Bing Map and paste the shortcode into Shortcode block. Finally, don’t forget to publish or save the posts/pages.

embed bing maps in wordpress 15

Now, let’s check out the result on your front-end website.

embed bing maps in wordpress 16

Conclusion

To sum up, there are many ways to embed Bing Maps in WordPress, but the two above are easiest. Thus, if you want to add Bing Maps, let’s follow the steps we shared above. We hope that you can do it successfully. If you have any query, why don’t you leave your comment below? Last but not least, don’t forget that we are providing many responsive Free WordPress Themes here, let’s take a look!

5/5 - (1 vote)

The post How to Embed Bing Maps in WordPress appeared first on LTHEME.

Enregistrer un commentaire

0 Commentaires