So this is old news to folks already, but it's the first time I played with it. You can use Google Maps under jQuery Mobile. Not only can you use it, but the maps work real well. It isn't as responsive as the desktop version but it's darn close, and it isn't too hard to use if you follow a few tips.
First off - if you use this HTML, as is shown in the Google Maps docs, you will have an issue:
<div id="map_canvas" style="width:100%; height:100%"></div>
Specifically, the issue is with height:100%. I'm not sure why, but nothing worked for me at all until I switched it to a hard coded value, like so:
<div id="map_canvas" style="width:100%;height:400px;"></div>
Obviously 400px is a bit arbitrary. It seemed nice though.
You also - probably - want to make use of the Google maps jQuery plugin. Designed both for jQuery Mobile and jQuery UI, it makes map usage even easier. Let's look at a complete example. Here's a demo mobile application with a home page (a list) and three sub pages. The first two pages are simple so they are included on the home page. The map page is separate.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Web App</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> <script src="jquery.ui.map.min.js"></script> <script> $('#mapPage').live('pageshow',function(){ $('#map_canvas').gmap({ 'center': new google.maps.LatLng(42.345573,-71.098326), 'zoom':14, 'callback':function() { $('#map_canvas').gmap('addMarker',{'position':new google.maps.LatLng(42.345573,-71.098326)}) } }); }); </script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="map.html">Our Location</a></li> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="page2" data-title="Page 2"> <div data-role="header"> <h1>Page Two</h1> </div> <div data-role="content"> Content </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="page3" data-title="Page 3"> <div data-role="header"> <h1>Page Three</h1> </div> <div data-role="content"> Content </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
You can see that I've included the normal set of jQuery Mobile resources (one CSS and two JS files), as well as the Google Maps library and the plugin. Now note my pageShow event. This will run whenever my map page is loaded. I fire up the plugin and create the map. I've got a hard coded long/lat here. My thinking here was that - normally - you're going to be showing a user a map of a store or some such. While you can geolocate from an address to a long/lat pair, it doesn't make sense to do that unless your store is slowly moving around the planet. Notice how easy the plugin makes it to handle the map loading and run another function immediately after - in this case - adding a marker.
Here's the map file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Our Location</title> </head> <body> <div data-role="page" id="mapPage"> <div data-role="header"> <h1>Our Location</h1> </div> <div data-role="content"> <div id="map_canvas" style="width:100%;height:400px;"></div> </div> <div data-role="footer"> <h4>Footer content</h4> </div> </div> </body> </html>
The only thing of note on the page is the div used for the map. That's it.
So - nothing more to say really. As I said above, I think it works well on mobile (I've got a HTC Inspire), much better than I thought. You can try it yourself by hitting the Demo button below.
p.s. It may be a small thing, but it seems like Google Maps should allow for a simpler way to automatically add a marker when you create a map at a specific location. It seems like a common use case - "Do a map for point X cuz X is an important thing."