A few months ago, I wrote the beginnings of a Windows 8 Metro style application that hosted the Bing Maps AJAX control and put a little functionality around it.

At a recent event, an attendee was asking me about this kind of technique and so I thought I’d dust off that sample (albeit unfinished) and publish it here for people to play with if it helps them out in any way.

At the time, this sample was mostly about me experimenting with using script from the web which, in a Metro style app you would usually do by creating an iframe to host some HTML which can then host that script. The iframe would run in the web context of a Metro style app which is a security sandbox where script cannot make calls into WinRT APIs.

By contrast, script loaded from the app’s package on disk runs in a local context where it is possible (and pretty much essential) to make calls into WinRT APIs.

You can find the proper explanation of those contexts here on the Developer Center.

The two contexts communicate via means of the postMessage method and the message event as defined in the W3C doc here.

My maps app presents a full screen view and then implements a few pieces of functionality. Firstly, it attempts to implement Search;

And I must admit that it does a bad thing because it attempts to subvert the Search charm a little by hijacking the Query Suggestions and Result Suggestions section to display two options around searching;

 

• Search for a place
• Search the map

This is bad UI and would probably get me banned from the Store but it’s kind of ok because the Consumer Preview already has a much better Bing Maps app so there’s no likelihood that mine will ever be in the Store

If I choose “Search for a Place” then I feed the place into the Bing API and then move the map to the top result while offering alternates if there are any;

And then the user can choose the one that they want. If they then choose to search the map, I again display alternates;

and the user can highlight entries on the map to see the details;

The app offers a command bar with some basic functionality – it can geolocate;

And it can alter the map style;

And it has a means of getting driving or walking directions in a fairly limited way. The user can set a start and end point and then get directions as in using this Set Start option to drop a moveable pushpin;

Followed by this Set End option to drop a moveable pushpin;

And then choosing walk/drive;

Which will display turn-by-turn directions that keep in sync with the map (this is all work done by Bing, I had to do very little);

The application tries to ensure that it “does the right thing” around managing the user’s current position and state within the app such that if it gets suspended and then terminated it will do its best to restore them back to where they were and that requires some additional work across the local context and the web context with a few messages being sent backwards and forwards to try and achieve that.

The app also tries to be network aware such that if the network goes away the app knows;

That’s about it – there is one more piece of functionality in the app which is the ability to print;

But I’d have to say that this is the piece that I didn’t quite finish and I haven’t revisited so you might have “very mixed results” with that part of the app versus just the “mixed results” you might expect with the rest of the app.

Enjoy – here’s the solution for download – all usual caveats apply

Note – if you do take this code then you’ll need to find the two piece of code with the keyword MISSING_KEY and replace that “MISSING_KEY” with your own Bing Maps and Bing Search keys.