introduction to bing maps

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