Live Demo | Download
This is a quick app to help you get started with adding map to web page.
1) The first thing we need to do is make a standard html file with a empty div called myMapdiv
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head >
3: <title>Adding A Map To A Web Page</title>
4: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5: </head>
6: <body >
7: <!-- the div element for the map to inject into -->
8: <div id="myMapdiv" ></div>
9: </body>
10: </html>
2)_ First thing you need to do is import the virtual earth JavaScript file
1: <script type="text/javascript"
2: src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
The first thing that you will notice is that you are not calling a javascript file at all but some file that ashx end to it?
An ASP.NET HTTP Handler is a simple class that allows you to process a request and return a response to the browser. In this case we are returning the most recent version of the JavaScript file we are requesting.
3) Declare a JavaScript variable called map and set it equal to null. We are going to use this variable to store the virtual map object into.
We are then going to to write a function that news up VEMap object and then passes in the myMapDiv as the name of the div that we want to virtual earth to inject the map into. We then going to load the map with pass no variables therefor calling all the default.
1: <script type="text/javascript">
2: var map = null;
3: function GetMap()
4: { 5: //the virtual earth map constructor takes in the div
6: //elemetnt the map goes into.
7: map = new VEMap('myMapdiv'); 8: // the default load map. Centers on the US many different
9: //overloads can be placed here.
10: map.LoadMap();
11: }
12: </script>
4) Call our JavaScript function from onload attribute of the body tag, and we have map. Its important to not that we have to wait for the dom to fully load before we call the mapping function otherwise we risk the page not knowing about the myMapDiv div.
1: <!-- Call the GetMap() function on page Load..
2: .The Dom Needs to load before the map is created-->
3: <body onload="GetMap()">
4: <!-- the div element for the map to inject into -->
5: <div id="myMapdiv" ></div>
6: </body>
And this is the map that we get.
There you have it your first mapping WebSite.