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&#8243;></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.

Advertisements

15 comments

  1. hi,thans for the info, great read, looking forward to the next update. if u do twitter follow me @favoriterecipe and i will follow you back

  2. Hi, for some reason when I place your feed into google reader, it won?t work. Can you give me the RSS link just to be sure I?m using the most appropriate one?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s