{"id":15906,"date":"2020-11-14T15:00:40","date_gmt":"2020-11-14T14:00:40","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=15906"},"modified":"2020-11-13T12:17:22","modified_gmt":"2020-11-13T11:17:22","slug":"bing-maps-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/bing-maps-wordpress\/","title":{"rendered":"How to Add Bing Maps to Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]If, for whatever reason, you are looking for an alternative to Google Maps, Bing Maps is the obvious choice.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You may ask yourself what the difference is, and the answer is – not much. Both Bing and Google offer accurate and correct maps. What more could you ask for? Well, for one, Bing offers a higher resolution, making Bing Maps better for finding one\u2019s way in tight spots. This also means it can be better for desktop computers, when high resolution can really come into play.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Also, some people simply want to avoid Google wherever they can, and Microsoft\u2019s answer to Google Maps, being functionally very similar, represents the perfect solution.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are two easy ways to add Bing Maps to your WordPress website. One involves Bing\u2019s own code generator, and another a free plugin and a Bing account. We will show you both.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let\u2019s get started!
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Bing Maps Using an Embed Code<\/h2>\n

[\/vc_column_text][vc_column_text]The first thing you need to do is go to the Bing Maps<\/a> website and find the location you want.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the More<\/em> menu, find the Embed a map<\/em> command.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will see a new tab allowing you to customize the map you wish to embed.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We will leave all the options on their default values, but suffice it to say you have several options here. You can change the Map Size<\/strong> to whatever size and aspect ratio you like (with a minimum of 250 and a maximum of 800 pixels). You can also change the Map Type<\/strong> into static<\/em>, which might load a little faster than the default draggable<\/em>, which leaves your visitors able to zoom and pan. The Map Styles<\/strong> menu lets you toggle between the default road<\/em> and aerial<\/em> (photo) views. Finally, you can toggle View Larger Map<\/em> and Get Directions<\/em> links.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]With that done, click the Generate Code<\/strong> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Customize <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Copy the generated code, and you are ready.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Generated <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, we will show you how to embed this code into a post.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you are using the Gutenberg<\/strong> block editor, this is very straightforward. Open a post, and click the + sign to choose a block. Choose the custom HTML<\/strong> block.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Custom <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, paste the generated code into your block.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Custom <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And your map will appear in your post, easy as that!
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In case you are using Elementor<\/strong>, the procedure is much the same. Simply select the Custom HTML<\/strong> widget from your left-hand side menu, drag it to where you want it on the page, and paste the code you obtained from Bing.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]And with the Classic<\/strong> editor, it\u2019s even simpler, though you lose some of the WYSIWYG quality Elementor provides: make sure you have the text<\/strong> tab selected, then paste the code where you want it to appear in a post or page.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Bing Maps Using a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]The above works great for a simple map. But say you operate from a range of different locations, or you want to add pins or shapes, to make a Bing map your own. You can do all that, and more, with a plugin. We will get you started on one of the commoner ones \u2013 a good all-round solution nonetheless.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The plugin we will be using is WP Bing Map Pro<\/a>. You will need to install and activate it. If you\u2019re unsure about what a WordPress plugin is<\/a> or how to install and activate a WordPress plugin<\/a>, we have tutorials for that.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Following that, you need to create a Bing account in order to get an API key. To do that, visit bingmapsportal.com<\/a> and Sign in<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Log in with your Microsoft account data, and click Yes, let\u2019s create a new account!<\/em> You will be taken to the Create account form, which you need to fill out with your data before clicking the Create<\/strong> button. Having created the account, navigate to My account\/My Keys<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will need to fill out a request form to create a key. Once you\u2019ve done that, you can create a key by clicking the Create<\/strong> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can now copy it from the table below.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, you need to configure the plugin. Use the left-hand menu in your WordPress Dashboard to navigate to WP Bing Map Pro\/WP Bing Map Pro<\/strong>.[\/vc_column_text][vc_empty_space height=”38px”][vc_column_text]The plugin will open on the Maps screen. But first, we want to take a look at the General Settings<\/strong> screen. You need to paste the key you\u2019ve copied into the API KEY<\/strong> box and click Save<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Click the +<\/strong> button to add a map, and name it. We have named it Our Location<\/em>. Then click Save<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now we have a shortcode for Our Location<\/em>. Copying that shortcode into a shortcode block will render a world map. So we need to narrow it down a little. Say our location is near the 6 October Bridge in Cairo, Egypt. We will start editing the map by clicking the edit button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]We will pan and zoom in on the map to find our location. You can use the search function on Bing\u2019s website to do this for your location, or you can use the Map Center Latitude<\/strong> and Map Center Longitude<\/strong> commands. We feel a Zoom<\/strong> of 15 is appropriate for us.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Here you can also change the map Title<\/strong>, the dimensions (Width<\/strong> and Height<\/strong>), as well as choose among the six map Types. Once done, we will Save<\/strong> our Map<\/strong>. You can also copy the image of the map to your clipboard by clicking the Snap a Map View<\/strong> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In case you want to pin your location to the map, you\u2019ll need to take a look at the Pins screen. Click the +<\/strong> sign button to add a pin.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then you need to edit your pin by giving it a Pin Name<\/strong>, an optional Address<\/strong> (or define it using coordinates of Latitude<\/strong> and Longitude<\/strong>), choose or upload an Icon<\/strong> for it, and Save<\/strong> it.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To see it on your map, go back to the Maps<\/strong> screen, then navigate to the edit screen for Our Location<\/em>. There you will find the Map Pins<\/strong> tab. To add a pin to a map, find the pin you want (Head Office<\/em> in our case), and click the Add<\/strong> icon.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you return to the Map<\/strong> tab, you will find your pin stuck to the map. You need to Save<\/strong> your Map<\/strong> and copy the shortcode [ourlocation]<\/em> for later use.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you are using the Gutenberg block editor and want to display your map as part of a post, add a new shortcode block<\/strong> by clicking on the + sign and choosing a shortcode block. Paste [ourlocation]<\/em> into its field.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And now your map will be displayed as part of a post or page.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you are using another page editor, the procedure is much the same as discussed above: for Elementor, select the Shortcode<\/strong> widget from the left-hand side menu, drag it to where you want it on your page or in your post, and paste the shortcode for your map into the shortcode field.[\/vc_column_text][vc_empty_space height=”38px”][vc_column_text]If you are using the classic editor, simply set your input to text and paste the shortcode. WordPress will do the rest for you.
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]As you have seen, displaying a Bing map on your website is very easy and takes next to no time at all. If you are looking for a simple map, you can simply embed it using the code generated by Bing Maps. If, on the other hand, you are looking for a complex solution for, say, a range of locations over different cities, countries or even worldwide, if you are looking to add pins, lines or shapes to make your map more informative for your visitors, we suggest you get yourself set up with a Bing account and a plugin such as WP Bing Map Pro and use its customization functions \u2013 barely touched upon in this article \u2013 to create a map or set of maps that suit your brand and website style more.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Add a Bing Map to your WordPress website and help your visitors find your physical location. We will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":15937,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,15,4,13],"class_list":["post-15906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=15906"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15906\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/15937"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=15906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=15906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=15906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}