Tutorial #10
Embed a Bing Map Basic   2013-11-05


Bing Maps from Microsoft is a competitor of Googl Maps. They look slightly different and on occasion I find minor differences between the two in terms of data coverage or accuracy. But basically they are very similar in their core features.

Like Google Maps, it is easy to embed a Bing Map in your web page. The end result will look something like this:

Screenshot of the demo for this tutorial

Step by Step

1: Go to Bing Maps and navigate to your place of interest by entering an address or place name. Click on the Share button in the top right of the map.

Screenshot of the demo for this tutorial

2: You can copy and paste the embed code that appears in the dialog box, but it is better to click Customize and preview.

Screenshot of the demo for this tutorial

3: This dialog allows you to change the size of the embedded map, show or hide links below it, select the road map or aerial view, etc. When you have the map the way you want it, click Generate code.

Screenshot of the demo for this tutorial

4: Copy and paste the HTML code into your web page in the desired location, save and reload the page.

Screenshot of the demo for this tutorial

Understanding the Code

The code creates an iframe that uses the URL http://www.bing.com/maps/embed/viewer.aspx as its src. There is a list of key = value parameters that extend the URL.

cp= specifies the Latitude and Longitude pair with the two separated by a tilde (~) character.

w= and h= specify the width and height for the map.

This is followed by three links that bring up different versions of the map.

Code for this Tutorial

Share this tutorial

Related Tutorials

1 : Embed a Google Map   (Basic)

15 : Display a Google Map using JavaScript   (Intermediate)

Comment on this Tutorial

comments powered by Disqus