World Map in your Web Page

In this article I will tell you how to display a world map in your web page..sounds cool? interesting ? Then here’s the method (I tested it about 5-6 weeks ago).You can Download my project here

Basically most of you might have heard about Microsoft MapPoint Service, so that you can connect to their location server(VirtualEarth.net), and get the whole map back to your web page, so in this example I used MapPoint Services which is extremely simple.

 The Map which will be displayed is basically javascript control, and you only have to call that javascript source using a <script> tag. After you import that javascript control into your page, you can call the functions defined in that control, so all the function which are required to control a map like ‘VirtualEarth’ is available.

First as usual you need to open Visual Studio and create a new website.
Then within the <head> element put this
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<script type=”text/javascript” src=”http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js&#8221; mce_src=”http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js&#8221; ></script>
<script>

var map = null;var findcontrol = false;function GetMap()

{

map = new VEMap(‘myMap’);

map.LoadMap(new VELatLong(6.92, 79.85), 10 ,’r’ , false);

}

function ShowHideFindControl()

{

if (findcontrol)

{

map.HideFindControl();

findcontrol=false;

}

else

{

map.ShowFindControl();

findcontrol=true;

}

}

function GetInfo()

{

alert(‘The top edge of the map on the Web page is at pixel: ‘+map.GetTop());

alert(‘The left edge of the map on the Web page is at pixel: ‘+map.GetLeft());

alert(‘The latitude,longitude at the center of the map is: ‘+map.GetCenter());

alert(‘The current zoom level of the map is: ‘+map.GetZoomLevel());

//alert(‘The map control version is: ‘+VEMap.GetVersion());

}

</script>

Within the body tags put these

<body onload=”GetMap();”><form id=”form1″ runat=”server”><div id=’myMap’ style=”width:775px; height:438px; left: 0px; top: 0px; z-index: 100;”></div><INPUT id=”show_hide” type=”button” value=”Show or Hide the Find control”name=”show_hide” onclick=”ShowHideFindControl();” style=”left: 31px; top: 457px”>

<INPUT id=”getinfo” type=”button” value=”Get Info” name=”getInfo”

onclick=”GetInfo();” style=”left: 310px; top: 457px”>

<div>

</div>

</form>

</body>
As you can see i called the ‘LoadMap’ method in the body load event so that the Map will be imported to your page when the page is loaded. In addition to that there are some buttons to find a location and to get the Langtitude/Longitude of the Center of the Map.

This is all we need to do, so hope you’ll enjoy this thing and dont forget to put a comment.

Advertisements

One thought on “World Map in your Web Page

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