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:
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.
2: You can copy and paste the embed code that appears in the dialog box, but it is better to click Customize and preview.
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.
4: Copy and paste the HTML code into your web page in the desired location, save and reload the page.
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
|1 :||tutorial_10_example_1.html||Embed a Bing Map in a web page||Live Demo 1|
Share this tutorial
1 : Embed a Google Map (Basic)
Comment on this Tutorial
comments powered by Disqus