Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

Embed a Bing Map in WordPress with Shortcode

Embed a Bing Map in WordPress with Shortcode

When Google introduced a requirement for an API key before a map could be embedded into a page, it introduced a measure of complexity that simply stopped many from using the service. In this article we'll provide you with the Bing API-key-free alternative. A simple shortcode will return a Bing Map into your WordPress post or page with shortcode.

The Bing alternative isn't as feature rich as the Google alternative, and sadly, it doesn't support a marker unless the map is rendered programmatically.

The Result

The shortcode of [bm_bing_map latitude="-33.85703468676193" longitude="151.1931205078125"] returns the following:

You may return an aerial view (and include or exclude labels), or alter the level (or scale). As you can tell from the above, the map doesn't support address geocoding out-of-the-box. Instead, you'll have to use a latitude and longitude. You may obtain these details from the Bing Embed page, or via a Google Map URL.

If you required reverse geocoding you should add a few lines into the code to obtain and cache the coordinates; there are plenty of services to choose from, including Google and Bing (although if you had a Google API Key you would be better served by using the Google Map embed code).

Latitude and Longitude Bing Maps

Pictured: You may also copy the latitude and longitude directly from a Bing map.. Despite the lack of reverse geocoding, the latitude and longitude does provide a consistent and accurate result.

To return an aerial view of Sydney's GPO we'd use the shortcode of [bm_bing_map latitude="-33.85703468676193" longitude="151.1931205078125" aerial="1"]. By default the labels are shown but you may exclude them with labels="0". In this example we'll also zoom out and show a smaller scale map with level="14" (the shortcode defaults to a level of 17). The result:

The margin above and below the map iframe may be altered with margin="30".

The Shortcode Function

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

1
<?php 
2
/*
3
 Embed a Bing Map in WordPress with Shortcode
4
 https://www.beliefmedia.com.au/wordpress-bing-map-shortcode
5
*/
6
 
7
function beliefmedia_bing_map($atts) {
8
 
9
 $atts = shortcode_atts( array(
10
 
11
  'latitude' => false,
12
  'longitude' => false,
13
  'width' => 640,
14
  'height' => 400,
15
  'aerial' => 0,
16
  'labels' => 1,
17
  'level' => 18,
18
  'margin' => 30
19
 
20
 ), $atts);
21
 
22
 /* Location obviously required */
23
 if (!$atts['latitude'] || !$atts['longitude']) return '';
24
 
25
 /* Show aerial view */
26
 $aerial = ($atts['aerial']) ? ($atts['labels']) ? 'h' : 'a' : 'r';
27
 
28
 return '<div style="margin: 0 auto; width: ' . $atts['width'] . 'px; margin-top: ' . $atts['margin'] . 'px; margin-bottom: ' . $atts['margin'] . 'px;"><iframe loading="lazy" style="display: block; border-style: none;" height="' . $atts['height'] . '" width="' . $atts['width'] . '" frameborder="0" src="https://www.bing.com/maps/embed?h=' . $atts['height'] . '&w=' . $atts['width'] . '&cp=' . $atts['latitude'] . '~' . $atts['longitude'] . '&lvl=' . $atts['level'] . '&typ=d&sty=' . $aerial . '&src=SHELL&FORM=MBEDV8" scrolling="no"></iframe></div>';
29
}
30
add_shortcode('bm_bing_map', 'beliefmedia_bing_map');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

A small number of shortcode attributes apply.

latitude and longitude

The latitude and longitude of the reference point. Obtain via Google Maps or Bing Maps.

width and height

The width and height of the map.

aerial

The aerial is the 'satellite-style' aerial photograph, rather than a map. If an aerial photograph is returned the label option is made available.

labels

When the aerial option is used the labels will show by default. To exclude them, use labels="0".

level

The 'zoom' level of the returned map. A higher number returns a smaller scale (or larger map), and a smaller number returns a larger scale (or more detailed map). A zoo level of about 17 shows all of the Sydney basin and surrounding regions (if you're familiar with Sydney, a scale of 10 returns an area from the city to Parramatta). Defaults to 18.

margin

The margin alters the margin above and below the map. Defaults to 30px.

Conclusion

We're considering including a feature-rich map feature into our Elementor plugin, but we'll get some feedback from users before we push ahead. If we did build the simple feature we'd certainly include a reverse geocoding function so the latitude and longitude wouldn't be required... but this would likely require we build it to utilise Google's service (thus requiring a Google API Key). If clients have a specific need, please let us know.

Download


Title: Bing Map Shortcode
Description: Returns an embedded Bing map into your post or page with shortcode. Various options apply.
  Download • Version 0.1, 742.0B, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Connecticut)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment