Quick demo of jQuery and Google Maps

This post is more than 2 years old.

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">

&lt;div data-role="header"&gt;
	&lt;h1&gt;Our Location&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="content"&gt;
	&lt;div id="map_canvas" style="width:100%;height:400px;"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div data-role="footer"&gt;
	&lt;h4&gt;Footer content&lt;/h4&gt;
&lt;/div&gt;

</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."

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Raymond Camden posted on 8/7/2011 at 2:23 AM

I meant to include this - more demos:

http://jquery-ui-map.google...

Comment 2 by Johan Säll Larsson posted on 8/15/2011 at 6:44 PM

You should link to the tag 2.x.x instead of the trunk. The trunk has now 3.0-a code which is slightly different (no callback).

Comment 3 by Joseph posted on 8/26/2011 at 9:02 PM

Can you please tell me when I try your code( copy paste), The map page is displaying blank. I have local copy of the jquery.ui.map.min.js" to which its referring to. So I am not sure what I am missing? Please help.

Comment 4 by Raymond Camden posted on 8/27/2011 at 11:09 PM

Could be almost anything. Got a site I can hit?

Comment 5 by Terry posted on 4/29/2012 at 7:24 PM

First, thank you Raymond for the tutorials and your time.

Is there anyway to use addresses instead of the LatLng?

Thanks again,

Terry

Comment 6 by Raymond Camden posted on 4/29/2012 at 9:50 PM

Google Maps requires a Lat/Lng, but they provide a geolocation service that lets you pass an address and get a lat/lng back. So you would run that - get the result, and then make the map. You should consider caching that too if possible.

Comment 7 by Terry posted on 4/30/2012 at 6:15 PM

Thanks Raymond.

I "sort of" understand the geolocation and gmaps.

Was wondering about making it work with your example here. I have spent two days trying, but have failed. Was just hoping you might have an example.

Going to give it up for now. My forehead is sore from banging it on the desk:)

Terry

Comment 8 by Raymond Camden posted on 4/30/2012 at 7:09 PM

Check out my blog entry here: http://www.raymondcamden.co...

It shows taking a free form address and geocoding it. When I said "geolocation service", I meant "geocoding" service. Sorry.

Comment 9 by AMet posted on 7/31/2012 at 10:59 AM

I'd like to see you make this for googlemaps v3.
Would be really really nice, since I have some issues with making it work.

Comment 10 by Raymond Camden posted on 7/31/2012 at 6:26 PM

I believe the plugin already does this: https://code.google.com/p/j...