Adding Maps to your Windows Mobile Widget

One of the questions that came up at the Windows Mobile Debug Days (part of the Codemasons’ Guild) was how to integrate mapping into your application.  This prompted me to experiment with integrating the Bing Map (javascript) Control into a Windows Mobile Widget.  Whilst the javascript engine in Windows Mobile 6.5 has been given a massive injection of life, I was very skeptical that the javascript control would work out of the box. I was proven wrong with the map working with no modifications.  The following code is taken out of the online visual sdk, with the only change being the height and width of the map div to fit into the widget.

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
      <script type="text/javascript">
          var map = null;

          function GetMap() {
              map = new VEMap(‘myMap’);
              map.LoadMap();
          }  
      </script>
   </head>
   <body onload="GetMap();">
      <div id=’myMap’ style="position:relative; width:240px; height:260px;"></div>
   </body>
</html>

The only issues I found with the javascript control relate to the gesture support within the widgets in Windows Mobile 6.5. When you pan your finger within a widget it attempts to scroll the widget itself.  Unfortunately this means that you can pan the map by dragging your finger across the map.  Instead you have to use the navigation control in the top left corner.

clip_image002

Leave a comment