Simple jQuery Mobile Site with Google Maps API V3

Submitted by david on Sun, 2011-03-13 14:46

Since you have found this page you will know that jQuery mobile is an easy mobile development platform for creating WebApps for a variety of mobile phones. You can check out the development platform on the jQuery Mobile site.

I have used jQuery Mobile to develop a couple of projects, one for work and one just out of personal interest. The open day WebApp is by far the most developed and is currently 'out there'. The Food Review WebApp is really immature in comparison, mainly because I have lost interest but also because I have hit a few stumbling block along the way and my drive to complete the project does not match my laziness. Now the title of this post is 'Simple jQuery Mobile Site with Google Maps API V3' so you may be able to tell where some of the stumbling block have come from.......

The Google maps API is a great resource and one well worth messing around with in jQuery Mobile. If you have already tired this then you may have fallen down the same cracks as I did or you may have made a clean getaway. Either way I will show you my code and you can decided for yourself if it is useful.

It is likely that you will want multiple pages for your WebApp, I used the template provided by jQuery Mobile.

Sunday Roast WebApp image

Here is the homepage including navigation:

<div data-role="page" id="home" style="width:100%; height:100%;">
<div data-role="header">
<div class="ui-title-frontpage">
<h2>Leicester Sunday Roasts</h2>
</div>
</div>

<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Places</li>
<li><a href="#roast-list" data-transition="slide">List places</a></li>
<li class="goMap"><a href="#roast_map" data-transition="slide">View on map</a></li>
<li class="addMap"><a href="#add_map" data-transition="slide">Add Review</a></li>
</ul>
</div>
</div>

jQuery Mobile sets out a familiar UI and provides some nice transitions between pages. You can use separate html pages and load them via Ajax but at the moment I prefer the all in one multi page solution.

A basic page in jQuery Mobile from a Multi page template looks like this:

<div data-role="page" class="page-map" id="roast_map" style="width:100%; height:100%;">
<div data-role="header" data-position="fixed"><h2>Sunday Roasts</h2></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvasRoast" style="width:100%; height:100%;"></div>
</div>
</div>

This is were you will place your static content and reference your JavaScript.

Now lets get started with the map. First off you need to decide a few thing:

Do you want to use Geolocationing?
What type of map would you like to display? Satellite, Road or Hybrid?
Do you want to add markers?
Do you want infowindows?

Depending upon your decisions you can pick and choose from the code below. I will try and make it as easy as possible to just copy and paste so you can get started.

Initialising the map

To initialise the map you are going to have to use some javaScript.

function Newinitialize(lat,lng) {
center = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions);

}

$('.goMap').live('click', function() {
if(navigator.geolocation) {
detectBrowser();
navigator.geolocation.getCurrentPosition(function(position){
Newinitialize(position.coords.latitude,position.coords.longitude);
});
}else{
detectBrowser();
Newinitialize(52.636161,-1.133065);
}
});
</script>

The code above looks a little complicated but I will break it down.

The line that starts with $('.goMap').live is listening for a click on an element with the class of goMap. I attached that to the link on the navigation menu, so when we navigate to the view on map page the map for that page is initialised. Within that function we call detectBrowser, this will see if the userAgent reports as and iPhone or Android and sets the map size to the appropriate value. This is important, it means we can get most of the in the viewport in the majority of cases.

The next function called is Newinitialize, you will notice that I am already calling for geolocation here and passing them to the function as lat and lng. We then start constructing the map and attaching it to a div on that page called map_canvasRoast that we have already sized using the detectBrower function.

Essentially that is the map created and it should now look like this.

WebApp Map Image

We have a map and it knows where we are. Pretty good right? Ok, what else do you want? Markers? Infowindows?

Markers & Infowindows

Simple to create, effective and cool.

Below is the code to add one marker to a map, I know it looks pretty long but there are ways to simplify it and automate the creation of the markers using information from a database. you can customise icons and animation of markers. Here I have made the markers drop onto the map once it has been loaded, it looks pretty cool when it happens, you can also make them bounce.

var testmarkerpos = new google.maps.LatLng(52.624875,-1.142332);

var testmarker = new google.maps.Marker({
position: testmarkerpos,
map: map,
animation: google.maps.Animation.DROP
});

var contentString1 = '<div id="content"><div id="siteNotice"><p class="info_box"><a href="#anotherpage">Hello Marker</a></p><p>Click for more information</p></div></div>';

var infowindow1 = new google.maps.InfoWindow({
content: contentString1,
maxWidth: 200
});

google.maps.event.addListener(testmarker, 'click', function() {
infowindow1.open(map,testmarker);
});

That should give you the basic setup for a map in jQuery Mobile or in fact any webpage.

As always questions or comments are welcome.

jQuery

Mobile

Google Maps API V3

sunday roast

Add new comment

Comments

Thanks

Permalink Submitted by referenceur on Thu, 2011-03-31 14:10

Exactly what I searching for for Google Maps, thanx

Working only sometimes

Permalink Submitted by Christoph on Sat, 2011-04-02 22:07

Hi,

thanks for this nice tutorial. For me it only works sometimes (using 1.0a4 jquery mobile). Most of the time I will just see empty page. Eventually I will see the map after going back to home screen and choosing the map menu item again. Any suggestions on that? Wasn't able to find anything helpfull in the net on this topic.

Cheers,
Christoph

Hi Christoph,

Permalink Submitted by david on Sun, 2011-04-03 11:56

Hi Christoph,

It could be a problem with the map trigger on the menu link. However, I have also experienced a few glitches ondesktop browsers especially firefox. It does seem to work fine on my mobile phone (Samsung Galaxy S).

You may want to change the map call from $('.goMap').live to something else to see if that makes a difference. Perhaps having the map initialise on load or page ready. It could give it time to make all the neccessary callouts (location, map images, controls etc.).

Let me know what happen and I will update the tutorial.

David

Real quality post

Permalink Submitted by rakfakbusbari on Tue, 2011-04-12 10:02

Excellent post with some good info, think i'll share this on my twitter if you don't mind and maybe even blogroll it depending on the feedback, thanks for sharing. My blog: <a href="http://www.ikyani.se">Omega 3</a>

HI

Permalink Submitted by Ravi Joseph on Sun, 2011-04-24 23:07

The Blog is really helpfull, thanks for providing this.

multiple markers

Permalink Submitted by katie on Wed, 2011-06-01 12:29

Really helpful, was wondering how to had more markers within that same html page?

multiple markers

Permalink Submitted by david on Wed, 2011-06-01 17:55

Hi Katie,

You can just change the name of the marker and copy the code. Like this:

var marker= new google.maps.Marker({
      position: centre,
      map: map,
      title:"title1",
      icon: image,
      animation: google.maps.Animation.BOUNCE
       });

          var marker2= new google.maps.Marker({
      position: centre2,
      map: map,
      title:"title2",
      icon: image,
      animation: google.maps.Animation.BOUNCE
       });

If that is ok for you let me know.

David

markers

Permalink Submitted by Khan on Mon, 2011-06-06 22:16

excellent article !! just one issue for me the markers not appearing for me any ideas??

This my code what is wrong....

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial on Codeforest.net</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
06
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
07
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>
<body>

}

function detectBrowser() {
var useragent = navigator.userAgent;
var mapdivMap = document.getElementById("map_canvasRoast");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdivMap.style.width = '100%';
mapdivMap.style.height = '100%';
} else {
mapdivMap.style.width = '600px';
mapdivMap.style.height = '800px';
}
};

var testmarkerpos = new google.maps.LatLng(52.624875,-1.142332);

var testmarker = new google.maps.Marker({
position: testmarkerpos,
map: map,
animation: google.maps.Animation.DROP
});

var contentString1 = '<div id="content"><div id="siteNotice"><p class="info_box"><a href="#anotherpage">Hello Marker</a></p><p>Click for more information</p></div></div>';

var infowindow1 = new google.maps.InfoWindow({
content: contentString1,
maxWidth: 200
});

google.maps.event.addListener(testmarker, 'click', function() {
infowindow1.open(map,testmarker);
});

</script>

<div data-role="page" id="home" style="width:100%; height:100%;">
<div data-role="header">
<div class="ui-title-frontpage">
<h2>Leicester Sunday Roasts</h2>
</div>
</div>

</body>
</html>

marker

Permalink Submitted by david on Tue, 2011-06-07 21:37

Hi,

You need to make sure that the markers are initialised after the map or at the same time. When you create a marker you tell it what map it is assigned to in the options (map: map).

I have changed your code and tested it:

var testmarkerpos = new google.maps.LatLng(52.624875,-1.142332);

var testmarker = new google.maps.Marker({
position: testmarkerpos,
map: map,
animation: google.maps.Animation.DROP
});

var contentString1 = '<div id="content"><div id="siteNotice"><p class="info_box"><a href="#anotherpage">Hello Marker</a></p><p>Click for more information</p></div></div>';

var infowindow1 = new google.maps.InfoWindow({
content: contentString1,
maxWidth: 200
});

google.maps.event.addListener(testmarker, 'click', function() {
infowindow1.open(map,testmarker);
});

}

Good luck, please let me know about your project, I would love to hear how other people are using it.

David

Still not working

Permalink Submitted by Khan on Sat, 2011-06-11 11:35

Hi David,
Many thanks for your response, i a m still confused i have tried exactly what you suggested but still its not working here is my code can you please paste the full working code of your example i want to understand why is it not working for me:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
06
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
07
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

function Newinitialize(lat,lng) {
center = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.SATELLITE
}

map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions);

var testmarkerpos = new google.maps.LatLng(52.624875,-1.142332);

var testmarker = new google.maps.Marker({
position: testmarkerpos,
map: map,
animation: google.maps.Animation.DROP
});

var contentString1 = '<div id="content"><div id="siteNotice"><p class="info_box"><a href="#anotherpage">Hello Marker</a></p><p>Click for more information</p></div></div>';

var infowindow1 = new google.maps.InfoWindow({
content: contentString1,
maxWidth: 200
});

google.maps.event.addListener(testmarker, 'click', function() {
infowindow1.open(map,testmarker);
});

}

function detectBrowser() {
var useragent = navigator.userAgent;
var mapdivMap = document.getElementById("map_canvasRoast");

$('.goMap').live('click', function() {
if(navigator.geolocation){
detectBrowser();

navigator.geolocation.getCurrentPosition(function(position){
Newinitialize(position.coords.latitude,position.coords.longitude);
});
}
else
{
detectBrowser();
Newinitialize(52.636161,-1.133065);
}
});

</script>

</head>
<body >

<div data-role="page" id="home" style="width:100%; height:100%;">
<div data-role="header">
<div class="ui-title-frontpage">
<h2>Leicester Sunday Roasts</h2>
</div>
</div>

</body>
</html>

Hello again

Permalink Submitted by david on Wed, 2011-06-15 15:51

Here is the full code

</head>

function Newinitialize(lat,lng) {
center = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.SATELLITE
}

map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions);

var testmarkerpos = new google.maps.LatLng(52.624875,-1.142332);

var testmarker = new google.maps.Marker({
position: testmarkerpos,
map: map,
animation: google.maps.Animation.DROP
});

var contentString1 = '<div id="content"><div id="siteNotice"><p class="info_box"><a href="#anotherpage">Hello Marker</a></p><p>Click for more information</p></div></div>';

var infowindow1 = new google.maps.InfoWindow({
content: contentString1,
maxWidth: 200
});

google.maps.event.addListener(testmarker, 'click', function() {
infowindow1.open(map,testmarker);
});

}

function detectBrowser() {
var useragent = navigator.userAgent;
var mapdivMap = document.getElementById("map_canvasRoast");

$(document).ready(function() {
$('.goMap').live('click', function() {
alert("fired");
if(navigator.geolocation){
detectBrowser();

navigator.geolocation.getCurrentPosition(function(position){
Newinitialize(position.coords.latitude,position.coords.longitude);
});
}
else
{
detectBrowser();
Newinitialize(52.636161,-1.133065);
}
});
});
</script>

</head>
<body >

<div data-role="page" id="home" style="width:100%; height:100%;">
<div data-role="header">
<div class="ui-title-frontpage">
<h2>Leicester Sunday Roasts</h2>
</div>
</div>

</body>
</html>

still problem

Permalink Submitted by Khan on Wed, 2011-06-15 20:47

David,

Really sorry but i think you code is also not working i have tested in the simulator and on the device its self it does not display any map at all are you sure its working for you???

Khan

still problem

Permalink Submitted by david on Wed, 2011-06-15 20:51

It works fine in my browser (firefox 4.01), I have not tested it on my android device. Feel free to 'borrow' the code from my live WebApp www.davidjwatts.com/food it works fine on my phone, iphone and newer blackberrys.

still problem

Permalink Submitted by Satya on Tue, 2011-07-19 23:16

David your link www.davidjwatts.com/food does not show the map on an safari browser when I click either of the list items.... with user agent set to iphone 4.

All the same the tutorial was very educative. If you get a chance please let us know if there is an issue on your side.

map on www.davidjwatts.com/food is missing

Permalink Submitted by Graham on Tue, 2011-08-02 19:58

Hi David, by far the best map sample for jquerymobile with google maps that I've seen. Unfortunately when I implement your sample and/or visit your link from the iPhone simulator/device or in Safari I don't get a map view. I realize this post is older but maybe you can bail me out :).

Thanks,
Graham

Hi Graham

Permalink Submitted by david on Tue, 2011-08-02 22:22

It should work now, I checked it out and it seems like a probably with people submitting reviews without a latitude or longitude attached.

I will need to look at the form submission to fix this but for now I have just deleted the incorrect entried from the database.

If you ned some help getting an example working let me know. I can take a look at your code.

Thanks,

David.

still problem

Permalink Submitted by Luky on Thu, 2011-10-06 09:40

Hi David! i like this ! but it does not show the map on safari, chrome, opera and firefox. it works well only on IE8 no my pc. With iphone 4 i've got the same problem. here my code:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

function Newinitialize(lat,lng) {
center = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP // SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions);

}

function detectBrowser() {
var useragent = navigator.userAgent;
var mapdivMap = document.getElementById("map_canvasRoast");

$('.goMap').live('click',function() {
if(navigator.geolocation) {
detectBrowser();
navigator.geolocation.getCurrentPosition(function(position){
Newinitialize(position.coords.latitude,position.coords.longitude);
});
}
else
{
detectBrowser();
Newinitialize(52.636161,-1.133065);
}
});
</script>
</head>

<body>
<div data-role="page" data-theme="e" id="page1">
<div data-role="header">
<h1>jQuery mobile page</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Places</li>
<li class="goMap"><a href="">View my position on map</a></li>
</ul>
<div id="map_canvasRoast">map</div>
</div>
<div data-role="footer">
&copy test
</div>
</div>
</body>

Still problem

Permalink Submitted by Satya on Tue, 2011-07-19 23:13

Yes. I tried and have the same error as you. I used a safari browser and set the user agent to iphone4... Let me check the link that david has posted subsequently...

It works...

Permalink Submitted by Satya on Wed, 2011-07-20 05:25

The example works. Initially I thought I had the same problem as Khan. It takes a while to refresh and sometimes does not work.. In that case you got to resize and it shows up. I found it works consistently if you change the map view to ROADMAP. Khan you may want to try it.

JQuery Mobile Events

Permalink Submitted by Android Pez on Thu, 2011-08-04 15:31

I would be really interested in a sample that worked with the jquery mobile events tap, swipe left, swipe right, etc working on google map. Any idea how to accomplish that?

Hi

Permalink Submitted by david on Thu, 2011-08-04 19:12

I haven't tried that yet but I will have a go next week. I am in Berlin this weekend but I will try during the week.

Jquery mobile Google maps plugin

Permalink Submitted by Johan on Thu, 2011-08-18 03:48

There is a jQuery mobile google maps plugin you could use. It is easy to use and very small. Check it out here http://jquery-ui-map.googlecode.com

Infowindows with markerclusterer

Permalink Submitted by Brant on Wed, 2011-09-14 11:48

Hi David,

I've managed to piece together a working map that uses the markerclusterer library and it is all working as it should.
I'm wondering if you could help me out with how to add an infowindow for each marker once the user zooms in to a level that they can see the individual markers.

I'm not entirely sure how I would go about doing this. Any help is gladly received.
I've put my current code below, thanks!

$(function() {

// Only for code formatting
SyntaxHighlighter.all();

$('#map_canvas').gmap().bind('init', function(evt, map) {

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var mapDiv = document.getElementById('map_canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-26.91, 134.38),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false
});

for ( var i = 0; i < 1000; i++ ) {
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(data.course[i].latitude,
data.course[i].longitude) } );
}

$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $('#map_canvas').gmap('get', 'markers')));

});

Thanks

Permalink Submitted by Lynxas on Sat, 2011-11-12 22:56

Hello, I really want to thank you because it helps me a lot to start playing with Jquery mobile and Google map V3.

Thanks for the post. Here’s a

Permalink Submitted by Kelly Jones on Mon, 2012-02-13 00:52

Thanks for the post. Here’s a geocoding feature that will make your applications smarter and more interactive. Instead of displaying plain text, any address-centric data can be displayed on your site with a live map from Yahoo! or Google. Users will get more accurate information and be engaged in the process http://www.caspio.com/extend/platform-extensions/map-mashup.aspx

A Whole Lotta Web and Techy S**t

davidjwatts.com