Originally posted on my old MSDN blog
As I’m often switching location between my home in the UK and working out in Redmond, I’ve been thinking for a while about how best to easily let people know where I am. As you can hopefully see, I’ve added a map to every page on this blog and I thought that maybe people might be interested how I did this, as I learnt a few things on the way that were reasonably interesting.
The first challenge was to figure out the best way around the limitations of adding a map to the blog page. Although the Community Server software that this site runs on is pretty flexible, you can only add elements to every page in various sections – in my case in the News section. Luckily there don’t appear to be any restrictions on the actual HTML you can add, so I was left with a choice of options.
My first thought was to add an <IFRAME… /> section that would call out to a page on my own server that would use Windows Live Maps to display where I am by adding a pushpin at the appropriate location. However this didn’t really work very well, as the map code didn’t really like being in an IFrame and the flow of the page around the map was broken.
Therefore the solution I hit on was to add the following code:
Interesting point to note is adding the defer=true on to the script call. Without it, I was occasionally hitting a known issue in Internet Explorer due to a bug in the IE parser :-(
- Note the excellent "delayed loading of the map code" that was written by Soul Solutionsthat I used here. This:
- Sets an animated GIF as the background to the map div while the code is loading
- Sets a callback to the function to setup the map once the VE API scripts have loaded
- The onscriptload callback function removes the dashboard and scalebar to make the map cleaner, sets the zoom level – defaults to 10 but can be overwritten by setting a zoom=n on the query parameters to the page request, and then simply adds a pushpin at the location set by the LocationEntry in the code behind
Hopefully this is pretty self-explanatory – see http://dev.live.com/virtualearth/ for more details about the Virtual Earth API.
Future plans (which I suspect are overly ambitious!) for this application involve:
- Mesh-enabling the application
- Hooking up my GPS so I can automatically update my location when I’m on the move
- Possibly hooking everything up to FireEagle