Bing Maps. A Google Maps Alternative, or Better?

Microsoft has released their own maps service and to be honest, it surely deserves more attention from developers. Bing Maps can be used with the same easy way Google Maps are used. To add a simple map to your webpage you have to include a JS file:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

and then run a simple function upon page load:

function GetMap()
 {
 var map = new VEMap('myMap');
 map.LoadMap();
 }

See the default map here.

Loading a Specific Map

Loading a specific map is simple too. You can use the same tools discussed in our Google Maps from A to Z article to get your desired latitude and longitude and apply them to above function to center the map to a specific location :

function GetMap()
 {
 var map = new VEMap('myMap');
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

This one loads a map of a village in Greece centered. See the map here.

Adding Pushpins and Tooltips

In the previous example, we centered our map to a village in Greece. Did you find out which village it was? I suppose not. What if we add a pushpin and a tooltip to give some basic information about a specific place? Well we can and we will because we must. Adding a tooltip to a map is done by using shapes:

function GetMap()
 {
 map = new VEMap('myMap');
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 //We first need to create a layer. We will discuss about layers later
 CreateLayer();

 //Add a pushpin to the new layer
 shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
 shape.SetTitle('My village');
 shape.SetDescription('This is where Jeez.eu is moderated from');
 layer.AddShape(shape);
 }

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

This is how the above map looks.

Using Custom Icons, Tooltips and Shapes

You can also use custom icons,tooltips and shapes in your maps. For example in order to add a custom icon in your map you have to point to an icon or create an icon with HTML :

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddPushpin;
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

 function AddPushpin()
 {
 var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());

 var icon = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:red;width:100px;'>Jeez.eu Headquarters</div>";
 //Set the icon
 shape.SetCustomIcon(icon);

 //Set the info box
 shape.SetTitle("<h2>Custom Pin</h2>");
 shape.SetDescription("A simple tooltip");

 //Add the shape the the map
 map.AddShape(shape);
 }

See the example here.

and to make this example even better, we can add custom tooltips too:

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddPushpin;
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

 function AddPushpin()
 {
 var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());

 var icon = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:red;width:100px;'>Jeez.eu Headquarters</div>";
 //Set the icon
 shape.SetCustomIcon(icon);
//This is where we set the contents of the tooltip. We can use plain HTML here :)
 var infobox = "<div style='width:309px;'>A preview of Jeez.eu</div>"
 +"<iframe src='http://jeez.eu' width='309px' height='272px' ></iframe>";

 //Set the info box
 map.ClearInfoBoxStyles();
 shape.SetTitle("<h2>About Jeez.eu</h2>");
 shape.SetDescription(infobox);

 //Add the shape the the map
 map.AddShape(shape);
 }

and create something like this.

Adding custom shapes to maps is trivial for successful maps. We can create polygons and other shapes to mark an area easily. For example :

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddPolygon;
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

 function AddPolygon()
 {
 var ll = map.GetCenter();
 var lat = ll.Latitude;
 var lon = ll.Longitude;

 var shape = new VEShape(VEShapeType.Polygon, [new VELatLong(lat,lon-0.15),
 new VELatLong(lat+0.1,lon-0.05),
 new VELatLong(lat+0.1,lon+0.05),
 new VELatLong(lat,lon+0.15),
 new VELatLong(lat-0.1,lon+0.05),
 new VELatLong(lat-0.1,lon-0.05)]);

 //Set the line color
 var lineColor = new VEColor(254,78,64,Math.random());
 shape.SetLineColor(lineColor);

 //Set the line width
 var lineWidth = Math.round(3);
 shape.SetLineWidth(lineWidth);

 //Set the fill color
 var fillColor = new VEColor(64,168,255,Math.random());
 shape.SetFillColor(fillColor);

 var icon = "<div style='border:1px solid red;'>Jeez</div>";
 //Set the icon
 shape.SetCustomIcon(icon);

 //Set the info box
 shape.SetTitle("<h2>Custom Pin</h2>");
 shape.SetDescription("Sample tip");
 //Add the shape the the map
 map.AddShape(shape);
 }

This is a polygon here.

Using XML to specify Locations on the map

As with Google Maps, Bing Maps also support XML data to be loaded. So the most interesting example is this of the mountaineers. We use a GeoRSS XML file with their locations and load them to our map. A typical GeoRSS file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
 xmlns:georss="http://www.georss.org/georss">
 <title>Earthquakes</title>
 <subtitle>International earthquake observation labs</subtitle>
 <link rel="nofollow" href="http://example.org/"/>
 <updated>2005-12-13T18:30:02Z</updated>
 <author>
 <name>Dr. Thaddeus Remor</name>
 <email>tremor@quakelab.edu</email>
 </author>
 <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>
 <entry>
 <title>M 3.2, Mona Passage</title>
 <link rel="nofollow" href="http://example.org/2005/09/09/atom01"/>
 <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
 <updated>2005-08-17T07:02:32Z</updated>
 <summary>We just had a big one.</summary>
 <georss:point>45.256 -71.92</georss:point>
 </entry>
</feed>

You can learn more about GeoRSS at the official page of the format. For our example, we will use this file. The code needed is:

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://seotests.writer.gr/bingmaps/georsstest.xml", l);
 map.ImportShapeLayerData(veLayerSpec, onFeedLoad);
 }
 function onFeedLoad(feed)
 {
 document.getElementById('msg').innerHTML = 'RSS or Collection loaded. There are ' + feed.GetShapeCount() + ' items in this list.';
 }

Lets break down the code above. First, we create our map and assign a callback function upon load of the map:

map.onLoadMap = AddMyLayer;

Then, we add the AddMyLayer function and with this function we create a new shape. We set the layer specification to be a GeoRSS type and we also give the path to the XML file. The data will be loaded in our layer. Then we import our layer and assign a callback function named onFeedLoad which will inform us about the number of the loaded items.

Here it is.

Searching Our Maps

Bing also allows us to search our maps. We can search about anything on our maps. From area names to exact addresses and from general queries like “flowers” or “stadium” to reverse searches. This is an example of a maps search engine :

<!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 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();
 }

 function FindLoc()
 {
 try
 {
 map.Find(null, document.getElementById('txtWhere').value);
 }
 catch(e)
 {
 alert(e.message);
 }
 }
 </script>
 </head>
 <body onload="GetMap();">
 <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
 <INPUT id="txtWhere" type="text" name="txtWhere">
 <INPUT id="find" type="button" value="Find" name="find" onclick="FindLoc();">
 </body>
</html>

and you can check it here.

Think the 2 parameters of the map.Find method as :

• What and
• Where

You can change the order of the parameters in map.Find to search for locations related to your queries on the map already rendered. For example:

map.Find( document.getElementById('txtWhere').value,null);

and you can also use the map.Find method like this:

map.Find( document.getElementById('txtWhere').value,document.getElementById('txtWhere').value);

using both What and Where.

Reverse Find

Reverse find is a great way to showcase maps interaction. You can add event listeners to your map with the map.AttachEvent method. The example below shows a map of Athens, Greece and when you click on it, a message box appears with the name of the street.

function GetMap()
 {
 var map = new VEMap('myMap');
 map.LoadMap(new VELatLong(37.9829, 23.7167), 15 ,'h' ,false);

 map.AttachEvent("onclick", PixelClick);

 }

 function PixelClick(e)
 {
 var x = e.mapX;
 var y = e.mapY;
 var pixel = new VEPixel(x, y);
 var LL = map.PixelToLatLong(pixel);

 map.FindLocations(LL, GetResults);

 }

 function GetResults(locations)
 {
 var s="Street Name: ";
 if(locations != null)
 {
 s+=locations[0].Name;

 }
 else
 {
 s+="No Result found.";
 }

 alert(s);
 }

You can try it here.

Using Bing Maps to Get Directions

Getting directions with Bing Maps is as easy as this:

function GetMap()
 {
 map = new VEMap('myMap');
 map.LoadMap();

 map.GetDirections(["Trikkala", "Athens", "Kaisariani"]);
 }

This example will get the directions from my town (Trikkala, which is wrong as the name is spelled with one “k” not with 2) to Kaisariani, Athens. Try it here.

Bing Maps come with some cool features. For example there is BirdsEye feature which allows us to get images from a territory from an angle and it also supports changing the orientation of the images. Another great feature is the 3D mode which allows you to explore maps as if you were in the map. You can create collections and save them to videos.

You can read more about the Bing Maps API and SDKs or download the Bing Maps Datasheet. I hope you use what you learned to build an awesome application. If you do, please let us know!

Popularity: 15%

Related posts:

1. Google Maps From A to Z During the last years, online maps have evolved so much...
2. Google Visualizations From A To Z Google has released an API that you can use to...
3. Creating A Google Wave Extension In 5 Steps This is a simple to follow tutorial on how to...
4. A Google Wave Guide For Dummies Today i got my invitation for Google’s new service called...
5. 4 Website Thumbnails Generators With An API To Use Yesterday, I was trying to add automatic website thumbnails generation...