Introduction to Bing Maps

INTRODUCTION
Here I will introduce you to the Bing maps. This article shows how to integrate Bing maps in your web application.

EXAMPLE
You must have integrated Google maps in your web application, but in this article, I will show you to integrate Bing maps in your web application.
Let us start with the basic example.
To start with, the example you need to call JavaScript api in your html page as shown below.

<script type=”text/javascriptsrc=”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.
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 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.

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

I have created a small application representing Bing maps. To view my sample application click here.

You can download the source code here.

Advertisements

7 comments

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