This Two-Minute Tutorial (TMT4 Part1) shows how to use a plugin with AppLaud to extend the functionality of jQuery Mobile available to an Android mobile web app. The plugin used acts as a wrapper for google maps, providing a simplified API for accessing Google Maps from jQuery Mobile: jQuery Google Maps plugin by Johan Säll Larsson. The sample app demonstrates an easy way to show a dynamic route map in a mobile web app and provide interactive directions using the device’s geolocation.
jQuery Google Maps Plugin (UI and Mobile)
The jQuery Google Maps plugin Version 3 is a jQuery plugin written to take away some of the headaches from working with the Google Map v3 JS API. Instead of having to use Google event listeners for simple events like tap, you can use jQuery touch events on the map and markers. It is also very flexible, highly customizable, lightweight (< 4KB) and works out of the box with jQuery Mobile. The plugin is well-documented and supported, and provides the most common functionality available from Google maps. The jQuery Google Maps plugin documentation integrates links to google maps APIs, classes and methods, shortening the learning curve for including google maps in a mobile web app.
(The tutorial for the earlier jQuery Google Maps Plugin Version 2 tutorial is here)
Sample App Summary
Use dynamic location to provide map and directions to business location using Google Maps and PhoneGap geolocation:
Using the project creation wizard, create a new project that includes:
2. Add Google Maps JS API v3 and the jQuery Google Maps plugin to the project
3. The Business Location (Destination)
The object mapdata defines the route destination. In the sample app, the location of the fictional business is in Stockholm, Sweden. Google maps uses a LatLng object to hold coordinates, created as shown below.
Note: Recommended method for implementing this app: use the default coordinates provided for a first run/sanity test. Once everything is running as desired, custom coordinates can be substituted. A convenient website for finding coordinates anywhere in the world is Get Lat Lon by Simon Willison.
Further Note: Want to use a street address instead? See forum post "How To: Geocoding, Google Maps..."
4. Create Small Map on Home Page
The API for the jQuery Google Maps plugin is defined by the wrapper method
Add the following code block to mapapp.js.
The code above uses
The area defined by
For the desired layout and appearance, css styling and jQuery Mobile features are used in index.html and mapapp.css to control the size and location of the map.
5. Create the main map and directions page
Add the following code to the end mapapp.js. The function
The event handler bound to 'tap' on the refresh button (see the footer on page with
The refresh function toggles the
In this second use of the plugin api, the method
The next parameter, google's DirectionsRendererOptions, uses the DOM element for the panel div, supplying the place where the text directions will go. See
6. Add event handlers and a fading hint box to directions page
The default behavior of the directions list provided by google maps works the same with the plugin and on mobile devices. Tapping on a direction will zoom in on the associated map to show details of that instruction. Unlike desktop, the map is on another page due to size. When the user taps on an instruction, the zoomed view will automatically appear on the map page. The tap (or click) event handler changes back to the map page to show the zoomed view.
Add the following code to the end mapapp.js.
A fading hint window is displayed to remind the user of this functionality whenever the directions page is shown. The images below show the fullscreen map and directions page.
The screen shots below show a detailed direction (tap on any instruction in directions list to zoom in on it) and a satellite view of the route after refreshing (toggling to other origin location, tap Satellite on map).
7. Option: Add PhoneGap's Geolocation to find Route Dynamically
To use geolocation to dynamically find the route, make the following two changes.
Modify the first line of mapapp.js where the destination location is specified (
Add the following code to mapapp.js immediately before the existing block denoted by
Note: From the PhoneGap Documentation on geolocation: The Android 2.x simulators will not return a geolocation result unless the enableHighAccuracy option is set to true.
8. Challenge: Add more features using jQuery and jQuery Google Maps plugin
8.1 Add radio buttons on the home page to let the user select driving, biking or walking travel mode.
8.2 Add a control on the main map to toggle a traffic layer.
8.3 Add multiple markers/locations (i.e. business with multiple locations) and way for user the select the location they want to visit.
Share your results on the discussion mailing list.
Had trouble with the above or have comments? Let us know on the mailing list or create an issue.
Return to the main tutorial page.