How do I Embed a Microsoft Live Maps? Solution!
I will be the first to admit that I am a big fan of Google. Their products are (usually) top notch, free, easy to use and once you start using them its hard to switch to a competitor. One of my truly favorite Google products is Google Maps. I can’t recall the number of maps I have used from them, but Google has always been the go to maps place (for me). Recently, though, I had a project where I needed to use a Microsoft Live Search Map. First, I had to get over the embarrassment of not even noticing Live Maps until now. For those that don’t know, Microsoft Live Maps is actually not that bad, but still have a way to go to match Google’s Street view (Compare Live vs Google). Right now, only Google offers the kind of shot (below), without a software download:
Nevertheless, Live Maps does offer a Bird’s View and in the case of this project Live Maps actually had better visual coverage. As a matter of fact, the Birds View option was the main reason the client wanted a Live Map. For them, Google had failed. As well, had I not been exposed to Live Maps, I might have thought that Google was the only solution.
As I began looking at the Microsoft Live Map with the customer, we hit a roadblock. We looked all over the Live Maps site for a way to embed the required map on their web page, but their was no clear way to do this. Sure we could link to the map, but they wanted the customers to stay on their site. This to me is where Microsoft Live Maps fails and why its very easy to avoid ever seeing one of their maps in a website. Plain and simple, there is no easy quick way to embed a Microsoft Live Map on a web page like there is in Google. Nevertheless, we had a real issue, and Microsoft Live Maps was the only solution that would work. The problem I soon realized too, was no one could easily answer the question: “How do I embed a Microsoft Live Map into a web page?” seemed not to have a clear answer. I searched in Google and Live, but all I got was garbage. Finally I found a link hidden within Microsoft Webmaster tools, which led me to the solution.
So how do you embed a Microsoft Live Map? Easy, (sort of). In order to embed a Microsoft Live Map, you head over to the Microsoft Live Map dev area and use their Interactive SDK. Quickly you see it’s not hard to embed a map, just time consuming. The real trouble is getting the right coordinates for you project. For that purpose I had to rely on the trusty Google Maps. When I got the coordiantes, I clicked view source at the Interactive SDK, copied the code to notepad, and imputed the correct coordinates. And voila! Below is an example of the basic map script to embed a Microsoft Live Map on your website. In our example we offer Montreal’s Farine Five Roses building. We also added a control to allow the user the ability to switch the vantage point.
In the header place the following
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script type="text/javascript">
var map = null;
var farinefive = new VELatLong(45.5, -73.54);
var pinLocation = new VELatLong(45.49, -73.56);
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(farinefive, 17);
// Let me know if a birdseye scene is available
map.AttachEvent("onobliqueenter", OnObliqueEnterHandler);
}
function OnObliqueEnterHandler()
{
if(map.IsBirdseyeAvailable())
{
var farinefive = new VELatLong(45.491128,-73.550932);
map.SetBirdseyeScene(farinefive);
}
}
</script>
In the body load the following
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px;
height:400px;"></div>
<INPUT type="button" value="Change to Birdseye" onclick="SetBirdseye();">
<INPUT id="south" type="button" value="Change the orientation to South"
name="south"
onclick="map.SetBirdseyeOrientation(VEOrientation.South);">
The result is the below:
As you can see it takes a bit more work than a Google Map, but the documentation from Microsoft is good enough to get you going in the right direct. We recommend you check out Microsoft Live Maps, when Google Maps may not be an option or they have not covered your area fully. In our case, if we had used Google Maps for the Montreal Landmark, below is the best Image we could have gotten:
To help you along, check out our live example of an embedded Microsoft Live Map.
Print This Post
How would I set this up with the coordinates for Demorest, GA, US? I’ve tried inputing in some coordinates for Demorest, but they’re not working. Could you look up Demorest, GA, and tell me what I need to put where to make it work?
Thanks!
Nathan
Go to: http://www.microsoft.com/maps/isdk/ajax/
Select on Menu Show Map >Show a specific map
View Source Code
Find Line: map.LoadMap(new VELatLong(47.6, -122.33), 10 ,’h’ ,false);
Replace with: map.LoadMap(new VELatLong(34.565098,-83.545172), 10 ,’h’ ,false);
Then select all, and copy the code into your page.
It’s sad, but the easiest way to get Coordinates for Bing Maps is to use Google Maps and the “link” button. ;p
Just thought i’d let you know that Microsft actually did street view first back shortly after both google maps live/bing maps released. However, I heard somwhere they didn’t go forward with it because of privacy issues, like google is running into now in japan.
Here is the URL for the proof of concept.
http://preview.local.live.com