Google Maps V3 and JQuery Mobile

This Post is for DEVELOPERs ONLY

I’m going to assume that your main mobile┬ápage includes something along the lines of:

<!— Core Jquery Mobile —>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”/>
<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

<!— Google Maps —>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script>

The above is current at the time of this post [Autmun 2016]. I will await JQuery Mobile 1.5 as and when.

Chances are that if you are reading this you are having some difficulty getting Google Maps to work with JQuery Mobile. I was stumped by this and I am sure that you’ve read a hundred and one fiddles as to how to make this work.

Well, I don’t really like fiddles and would rather get to the cause of the problem or the issue. Without going into a major analysis of JQuery Mobile, the bottom line is that you’ve probably got a page which looks something like this:

<div data-role=”page” id=”GPSTrace“>
<div data-role=”header” data-theme=”a” class=”” data-position=”fixed”>
<p>IP GPS Trace</p>
</div>
<div data-role=”ui-content”>
<div id=”GoogleMap“></div>
</div>
<div data-role=”footer” data-theme=”a” class=”” data-position=”fixed”>
<div data-role=”navbar”>
<ul>
<li><a href=”#Home”>Back to Home</a></li>
</ul>
</div>
</div>
</div>

and the important factors are:

  1. Your Page is called #GPSTrace
  2. Your Google Map is to go into #GoogleMap

Somewhere, you’ll have a JS call to load the Google Map into the #GoogleMap div which is clearly on the page #GPSTrace.

The JS function will look something like this :

function googleMap(_Lat, _Long) {

// Use GMaps V3 with JQuery Mobile 1.4.x
// src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”…. is required as a script include

/* changePage is to be deprecated in JQuery 1.5 !! – we’re using 1.4.5 Stable*/
$.mobile.changePage(‘#GPSTrace‘);

var map, mapOptions, myLatLng;

function initialize() {

/* From the passed parameters */
myLatLng = new google.maps.LatLng(_Lat, _Long);

/* Create a centered map with the GPS co-ords */
mapOptions = { zoom: 14, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById(“GoogleMap“), mapOptions);

/* Add in a marker for extra clarity */
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ‘I.S.P. GPS Position’
});

}

// ——————————————————————————————–
// And here is the real kicker, which sorts out all that nonsense with JQuery Mobile….
// ——————————————————————————————–

$(document).on(“pageshow”, “#GPSTrace“, function() {
initialize();
});

}

All this is really doing is putting some content into the #GoogleMap div on page #GPSTrace. It could just as easily be:

$(‘#GoogleMap’).html(‘Hello World’);

which would always work. So why doesn’t Google Maps ? OK, it does with the above code, but why? The googleMap API is ajax based and it is all about calling Google Maps after the JQuery Page has loaded.

In terms which we can all understand:

  1. Load the JQuery Page [here #GPSTrace]
  2. When this is done, load the MAP into #GoogleMap on the #GPSTrace page

Sounds pretty obvious when you put it like that, but JQuery mobile doesn’t work that way and will do the reverse unless you specify the above, which is where this rather cryptic .on(pageshow…. stuff comes into play. Hopefully with the above code [no fiddles] you’ll see that just by ensuring the proper order then your Google Map will appear.

Feel free to cut and paste the code into your mobile web-site. You can lookup all the .on() stuff at the main JQuery Mobile site and there are a fair few options. I found that the pageshow event works best of all, but try other options if you wish.

Regards

 

Henry

 

 

 

Leave a reply:

Your email address will not be published.

Site Footer