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.
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.
A Generated code popup will appear for you to copy the code snippet.
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.
You need to paste the code snippet you copied in the HTML field. Don’t forget to publish it.
So, now, you can see the Bing Map is displayed on your site.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Now, let’s check out the result on your front-end website.
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!
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments