April 30, 2013 Update: Post and template updated to include a more modern application cache loading script as well as utilizing my GeolocationMarker code and the latest Maps API v3 options.

Developing a map for mobile devices presents unique challenges. Not only must your user interface work on a small screen and be optimized for touch, but your map needs to load fast.

Note: This article is about maps for iPhone and Android devices. Many of the techniques here are optimized for HTML5 browsers and will not work in Internet Explorer or older browsers. While techniques exist to support similar functionality on other browsers, they are beyond the scope of this article.

Mobile Template

Must go faster

Speed to the user can be a tricky thing to measure. Do you measure until when your map, custom layers, markers and location are fully loaded? Or do you measure until the user can first interact with the map? Whatever the choice, it is important to provide feedback to the user so that they can at least see progress.

Delay loading the Maps API

Script tags block page rendering until they are completely downloaded and processed. This can be a significant wait on slower devices when loading the Maps API during which time the user won’t see any progress. To allow your page to load first, dynamically add the Maps API on the DOMContentLoaded event. When you use this technique, you’ll need to add a callback parameter to the script source to know when the API has finished loading.

document.addEventListener('DOMContentLoaded', function () {
    var element = document.createElement('script');
    element.src =
        'http://maps.google.com/maps/api/js?sensor=true&callback=Initialize';
    element.type = 'text/javascript';
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(element, scripts);
}, false);

Delay loading map customization scripts until the Maps API loads

Wait until the map has loaded to add custom layers, markers and other data. The tilesloaded event is a good place to start adding your data. This allows the user to see even more of the map load instead of waiting until everything is done. If your map script is in an external JavaScript file, you can dynamically add it right after initializing the map.

function Initialize() {
    var MapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(37.20084, -93.28121),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: true
    };
    map=new google.maps.Map(
        document.getElementById("map_canvas"), MapOptions);
 
    //Delay customizations until the map has loaded
    var element = document.createElement('script');
    element.src = 'template.js';
    element.type = 'text/javascript';
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(element, scripts);
}

HTML5 offline storage

This is basically caching on steroids. This has been covered elsewhere, but it should be mentioned that this alone makes a HUGE difference for return visits. There are a couple of things to keep in mind when developing a cache-manifest file:

• Every URL used in the site must be specified in either the CACHE or the NETWORK sections. The CACHE section takes specific urls while the NETWORK section takes URL prefixes.
• FireFox will cache this seemingly permanently. To clear it, remove your site from the Offline Storage section of the options (under Advanced – Networking). Chrome treats this similarly (only available in the 5.0 and later versions). Application cache usage is temperamental. See my post on the challenges of using the application cache with an external API.
• All map customizations must be done by JavaScript and not through a server-side mechanism since the page will be cached offline.

Sample CACHE-MANIFEST file:

CACHE MANIFEST
/examples/template.htm
/examples/template.css
/examples/template.js
http://missouristate.info/images/2010/loading.gif
http://missouristate.info/images/2010/map/gpsloc.png
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/
http://csi.gstatic.com/

Note: The URLs listed above are subject to change without notice. When using the Google Maps API via SSL there are slightly different versions of the addresses.

Follow industry best practices

Use the Google Page Speed tool to help optimize your site. While the suggestions are relevant to any site, they make a much bigger impact on mobile devices due to the high latency connections and device processor/memory constraints.

User interface

Not only must your map function on a small screen, but there is a wide variety of screen sizes among devices.

Dynamic map height

You want the map to fill the whole screen minus the space for any header/footer. You can use a CSS technique with conflicting absolute positions to avoid having to calculate height in JavaScript. This method will properly handle device rotation as well.

<div id="map_canvas"
    style="position:absolute;top:30px;bottom:50px;left:0;right:0;"></div>

Show a progress indicator

Lack of  feedback will frustrate your users. It’s rather simple to display a progress indicator to let your users know that the map is actually loading. Adding an overlay div to indicate loading is an easy way to show this. You can disable the loading div in the tilesloaded event.

Use the special link and meta tags

Both Android phones and the iPhone support a number of link and meta tags for sites which are designed to function as an application. Here’s a list of the one’s most applicable to a map:

Use high resolution images

Newer mobile devices (and now even laptops and desktops) come with high-density displays. To make full use of these, your map needs to use high resolution graphics. I have found that using CSS selectors based of the device-pixel density to be unreliable as there doesn’t seem to be a common meta viewport tag that will correctly report the density across all browsers. Instead, I’ve found it is just easier to make all images twice the size and scale them to 50% via CSS. Map markers and overlays can use a similar technique using the scaledSize property of the Icon object. Unfortunately at this point in time there is not a way to use high resolution icons in KML or Fusion Table Layers.

In order to reduce file size and to optimize the code, the JavaScript used in the mobile versions of the campus map is compiled using Google’s Closure Compiler. The code is a combination of several different source files compiled into the final file. The compiler requires any references to libraries or functions outside of the source files to be defined in extern files.

The main version is compiled from the following source files:

• shuttlemarker.js
• map_mobile_uncompressed.js – main logic for the map
• w3c_geolocation.js – extern file for the W3C Geolocation API now included in the default Closure-compiler externs
• google_maps_api_v3_2.js – extern file for the Google Maps V3 JavaScript API

Opera Mobile Support

Opera Mobile is not an officially supported browser for the Google Maps V3 JavaScript API. However, most of the basic functionality of the map works normally. The major exceptions related to the mobile campus map are the inability to pan the map by dragging and polylines.

In order to overcome these shortcomings, two additional source libraries are included in the opera version of the script:

• canvaspolylines.js – uses the HTML 5 canvas tag to provide basic polyline support in Opera – not needed with KmlLayers
• zoompancontrol.js – adds a small zoom and pan control to compensate for the inability to drag the map

Output Wrapping

The compiled output is wrapped in an anonymous function to prevent the global namespace from being polluted.

Update: 3/31/2010

I’ve now also compiled the main campus map with Closure Compiler. The original source files are:

• map_uncompressed.js