How to Embed Bing Maps in WordPress
Ever since the Google Maps API has become a pay-as-you-go platform, an increasing number of businesses and organizations have chosen to switch their websites to Bing Maps.
Maps are usually embedded on contact pages or in a site’s footer. In some industries, such as real estate and travel, maps can be found on the homepage. Wherever you decide to place the map, the process is really simple.
Let’s show you how to embed Bing Maps in WordPress.
Step 1: Find Your location in Bing Maps
Go to Bing maps. In the search bar, type the address you want to show on the map.
Click on the three dots icon at the end of the menu. In the dropdown menu, click on Embed a map.
Step 2: Customize your Bing Maps settings
In the settings menu on the left side of the screen, you can customize the map.
First, let’s set up the map size. The default size is Large (400×500 pixels). You can also choose the Small size (325x280px) or Custom size, which allows you to set your own desired dimensions.
We decided to go with the custom option, setting the map size to 800×400 pixels. In general, 800 pixels is the recommended width for images. This size is the perfect fit for responsive design, allowing you to create a website that looks good on all devices, including phones and tablets. With Bing Maps, this is the maximum allowed width.
The next thing we’ll set up is dynamics. You can choose whether the map on your website will be static or draggable. We will go with the dynamic option, which is the default setting. It allows your users to pan and zoom the map.
Then we set the map style. You can choose between Bing Maps Road and Aerial maps. Aerial maps offer the satellite view of your location.
Finally, set up the linking options. If you choose the default View Large Map setting, website visitors’ click on the embedded map will automatically open full-screen Bing Map in new tab.
You can also tick the checkbox for Get direction, allowing your users to click and see how to get to your location.
If you want, you can deactivate both linking options.
When you’re done with the settings, click on the button Generate Code to get HTML code.
Copy the generated code.
Step 3: Embed Bing Maps with Custom HTML Shortcode
On your website, go to the page where you want to embed the map. For example, if you want to embed it on the Contact Us page, go to the admin panel, and click on Pages > All Pages. Find the Contact page and click on Edit. In the upper left corner of the Gutenberg editor, click on the “plus” icon and search for Custom HTML shortcode.
Paste the code from Bing maps and save the changes.
When you update the page or post, check if the map works the way you wanted. This is how it will look like if you follow our directions.
Incorporating maps with directions to your business is simple, but it can do wonders for your business. People who visit your website want all the information in one place – so make sure they effortlessly find out how to get to you.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
