Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Embed Bing Maps in WordPress

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.

Bing Maps address

Click on the three dots icon at the end of the menu. In the dropdown menu, click on Embed a map.

Embed a Bing 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.

Bing Maps Size

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.

Bing Maps style

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.

Bing Maps type

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.

Bing Maps links

When you’re done with the settings, click on the button Generate Code to get HTML code.

Bing Maps Generate Code

Copy the generated code.

Bing Maps HTML

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.

Embed Bing maps

Paste the code from Bing maps and save the changes.

Paste custom HTML

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.

Bing Maps live

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!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply