Bing maps – whats new?

Bing map The Eiffel Tower Paris Birds EyeDuring the last couple of years, the map API from Google has been quite dominant as the prefered map source of many websites.

However there are other alternatives that offers free online maps.

In this post we’ll take a closer look at the possibilities with Bing Maps from Microsoft.

Bing maps vs. Google maps

Before digging into the possibilities with Bing Maps, it might be useful with a little comparison between the Bing Maps API and Google Maps API:

Comparison of Bing and Google Maps

So the conclusion so far is that Bing Maps looks like a real alternative to Google Maps.

Getting started with Bing Maps

When you start to work with Bing maps, you should visit the interactive SDK that has a lot of examples on how to work with the maps. Just like working with Google Maps, You need a Bing Map Account before you can access Bing maps.

You can use Bing Maps as a Silverlight or AJAX implementation. In this post we’ll concentrate on the ajax map control.

Implementing the ajax version of Bing Maps on your website requires you to add a piece of javascript code between the <head></head> tags that defines the general properties of the map, and small piece of code between the <body></body> where you wish the map to be displayed.

Displaying a standard map requires the following html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Bing map demo - The Eiffel Tower </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script type="text/javascript">
      var map = null;
      function GetMap()  {
        map = new VEMap('myMap');
        map.LoadMap(new VELatLong(48.858287, 2.294499), 17 ,'r' ,false);
      }
    </script>
  </head>
  <body onload="GetMap();">
    <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
  </body>
</html>

This html makes a nice map of the Eiffel Tower in Paris. See example 1. First the following line in the <head> section of the page is worth a few comments:

map.LoadMap(new VELatLong(48.858287, 2.294499), 17 ,'r' ,false);

This line tells that a map should be displayed of the position with the lat/long: 48.858287, 2.294499, the zoom level should be 17, the map type should be “road”

The following parameters can be used to change the default map type:

  • “r” = traditional road map
  • “a” = aerial map
  • “h” = hybrid map (aerial map with roads)
  • “o” = birds eye
  • “b” = birds eye hybrid

Especially the Birds eye option is very impressive, and something that’s not possible in Google Maps. Changing the map parameter from “r” to “o” makes a nice birds eye view of the Eiffel Tower. See example 2

Show a pushpin

If you want to highlight something special on the map, a layer with a clickable pushpin can be a very useful feature. To further illustrate the possibilities with Bing Maps, controls for displaying/hiding the pushpin layer is also added.  See example 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Eiffel tower and pushpin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script type="text/javascript">
      var map = null;
      var shape;
      var layer;

      function GetMap() {
        map = new VEMap('myMap');
        map.LoadMap(new VELatLong(48.858287, 2.294499), 15 ,'r' ,false);

        CreateLayer();

        //Add a pushpin to the new layer
        shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
        shape.SetTitle('Eiffel Tower');
        shape.SetDescription('Pretty amazing building');
        layer.AddShape(shape);
      }

      function CreateLayer() {
        layer = new VEShapeLayer();
        map.AddShapeLayer(layer);
      }

      function ShowLayer() {
        layer.Show();
      }

      function HideLayer() {
        layer.Hide();
      }
    </script>
  </head>
  <body onload="GetMap();">
    <a href="http://tips4php.net/2010/04/bing-maps-whats-new/"><< Back to article on tips4php.net</a><br/><br/><br/>
    <div>
      <input value='Show Layer' type='button' onclick='ShowLayer();'/>
      <input value='Hide Layer' type='button' onclick='HideLayer();'/>
    </div>
    <div id='myMap' style="position:relative; width:700px; height:500px;"></div>
  </body>
</html>

Adding multiple points

Displaying multiple points on a Bing can be done using GeoRSS data. GeoRss is a standard format for storing information about geographical destinations. The format of a GeoRSS file is the following:

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml" xmlns:mappoint="http://virtualearth.msn.com/apis/annotate#">
  <channel>
  <title>Mount Saint Helens - Mount Margaret Trail</title>
  <link></link>
  <description>Trailheads and campsites in the Mount Margaret area of Mount Saint Helens, WA</description>
  <mappointIntlCode>cht</mappointIntlCode>
  <item>
    <title>Coldwater Lake</title>
    <description>Formed by the 1980 eruption of Mount St. Helens.</description>
    <georss:polygon>46.31409 -122.22616 46.31113 -122.22968 46.31083 -122.23320 46.29802 -122.25877 46.29245 -122.26641 46.29286 -122.26392 46.28746 -122.26744 46.28741 -122.26006 46.29049 -122.25955 46.29120 -122.25620 46.28924 -122.255430 46.30271 -122.23251 46.31284 -122.22315 46.31409 -122.22616</georss:polygon>
    <icon>http://dev.live.com/virtualearth/sdk/img/hiking_icon.gif</icon>
  </item>
 </channel>
</rss>

In this example, a polygon displaying a lake is described in the GeoRSS file. The lake is described by a title, a description, a polygon defined by coordinates, and a icon.

Displaying the georsstest.xml example file in Bing maps, can be done with the following script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script type="text/javascript">
      var map   = null;
      function GetMap() {
        map = new VEMap('myMap');
        map.onLoadMap = AddMyLayer;
        map.LoadMap(new VELatLong(46.3081, -122.1928), 12);
      }

      function AddMyLayer() {
        var l = new VEShapeLayer();
        var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "http://tips4php.net/docs/georsstest.xml", l);
        map.ImportShapeLayerData(veLayerSpec, onFeedLoad);
      }

      function onFeedLoad(feed) {
      }
    </script>
  </head>
  <body onload="GetMap();">
    <a href="http://tips4php.net/2010/04/bing-maps-whats-new/"><< Back to article on tips4php.net</a><br/><br/><br/>
    <div id='myMap' style="position:relative; width:700px; height:500px;"></div>
  </body>
</html>

See example 4 for the output from this code. Please notice, that the GeoRSS needs to be hosted on the same domain as the script to work

Conclusions

Working with Bing map API is pretty straightforward.

You can select between a Silverlight or a AJAX implementation.

The quality of the maps is good, and there are many good features in the API – especially the birds eye images ar every impressive.

During the creation of this article, we have been benchmarking against Google Maps API, and in many cases it looks like Bing Map API is faster than Google map api.

It’s always great with competition and different selections to choose from, and in that perspective Bing Map is absolutely a worthy competitor to Google Maps.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

3 Replies to Bing maps – whats new?

  1. Greg Sneden says:

    Good article, thanks. One small correction – Bing Maps has a great Silverlight-enabled street view function (in your side-by-side table, you’ve indicated that Bing has no street view).

  2. Schwaneberg says:

    Thank you very much for your good tutorial. I will save it and will be come back time to time. :D I wish you a good evening!

  3. Fred says:

    Very helpful article. Thank you. One big advantage of bing maps is the possibility to protect the data stream with ssl. This is not possible with the free version of google maps.

Comments are now closed for this article.