- slide 1 of 4
Virtual Earth Map API
Most of the mapping applications / software are not free, however, Microsoft Virtual Earth offers free maps and allows anyone to use their API. Of course there are other mapping services, such as Yahoo Maps and MapQuest. There are also several costly products, such as MapInfo, but, Microsoft Virtual Earth Map API seems to work for everyone in just about every situation. I’m the developer for Albany Chamber of Commerce site (see the attached screen shot “Chamber Site") and I used MS Virtual Earth Map for member page.
In this article I will show you how to use the Microsoft Virtual Earth Map API within any HTML page.
- slide 2 of 4
Very Basic Map Example
Step 1. Create a HTML or .Net page, let’s call it Sample_1
Step 3. Modify the BODY tag of your HTML page to match this,
<body onload="GetMap();"> We modified the body tag so the page will call the GetMap() function when the page first loads.
Step 4. Now let’s add a place holder for Microsoft Map. Add the following code within the opening and closing of the BODY tag
<div id='myMap' style="position:relative; width:400px; height:400px;"></div> Notice we have id="myMap". This is used by Step 2 above and our code in Step 3 which will load Microsoft Map here. It’s basically used as a map placeholder.
That is all, now you have a page that will show Google Maps using the API, offered by Microsoft Virtual Earth for free. See the screen shot of this example so far. (Example_1.jpg)
- slide 3 of 4
More Advanced Map Example
var map = null;
map = new VEMap('myMap'); //line 1
var veMiami = new VELatLong(25.9577745, -80.2391839); //line 2
map.LoadMap(veMiami, 4, 'r'); //line 3
var veMiamiPin = new VEPushpin('SuperBowl', veMiami); //line 4
map.AddPushpin(veMiamiPin); //line 5
</script>In the above code fragment, the veMiami object contains the location (latitude and longitude) of Dolphins Stadium in Miami. The forth & fifth lines are the interesting ones. In the forth line, the VEPushpin object takes a least 2 parameters. The first parameter is a unique ID and the second parameter is the location of the pushpin (Dolphins Stadium in this case). Now that we’ve created our pushpin, we need to add it to our map via the AddPushpin call that is in the fifth line.
You should now see a red thumbtack on a map in FL region. (Screen shot “Dolphins Stadium").
That is all. You have seen two examples of how to use the Microsoft Virtual Earth Map API within your webpage. This is offered by Microsoft for free.