Search/Locate directions/place using Bing maps

INTRODUCTION
You must be familiar with the Google maps. In this article, I will introduced to the Bing maps and provide search functionality on Bing maps.

EXAMPLE
You must have integrated Google maps in your web application and provide search functionality on it. In this article, I will show you to integrate Bing maps in your web application and provide search functionality to search location or directions.

Let us start with the basic example.
To start with, the example you need to call JavaScript api in your html page in the head section  as shown below.

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

First, we will start with designing a HTML page. The HTML page will look as shown below.

In the above HTML we have call the Bing map api script in the head section in HTML as shown above.
We will be creating one more script file, which will contain the script for creating Bing maps nad search functionality.
In above HTML we are calling LoadBingMap(); JavaScript method on the body onload for loading maps on as when the page loads.

The below is the method which is used to load Bing maps on page load.

var map = null;
//Load Normal Map.
function LoadBingMap()
{
try
{
map = new VEMap(‘myMap’);
map.LoadMap(new VELatLong(22.55, 72.54), 5, ‘r’, false);
}
catch (e)
{
}
}

map = new VEMap(‘myMap’);
In the above code, the variable map stores the id of the div tag where the map will be loaded.

map.LoadMap(new VELatLong(22.55, 72.54), 5, ‘r’, false);
In the above code, LoadMap() function is used to load a basic Bing map. It will take parameter such as latitude and longitude, type of map to load and so on.

//For Finding Information.
function FindLoc()
{
var txtsearch = document.getElementById(“txtsearch”);
try
{
map.Find(null, txtsearch.value);
}
catch (e)
{
alert(e.message);
}
}

The above code is to find location using maps.

map.Find(null, txtsearch.value);
The above code is to find location on Bing maps.

For more information on visit http://msdn.microsoft.com/en-us/library/bb429645.aspx

That is it. Run the HTML in your browser and see the result. You will get the following result as shown below.

To view my sample application on Bing maps click here:
http://pranavmapia.co.nr/

For more articles on maps visit http://davepranav.co.nr

You can download the source code here.

Advertisement