As I explained already in this blog entry, we came across a problem as we wanted to use a Google Map on our mobile website.
The problem again:
The Google Map just worked fine for the first time, if we loaded another page, with other data and a new map, it did not worked.
Why? You are asking. Yeah we needed a bit of time to realize too. But in fact it is really logic. The Google Map is bond to a div with an unique ID. So there is the problem. If we open one page after another, all of these pages have this ID and stay in our HTML-DOM. So we needed to handle this…
I think there are maybe better and more beautiful solutions for that but I did not had the time to make it more beautiful – it just should work, and it did at the end
So what did I do? Right, I just removed the Google Map Div and included it just on the active page of the jQuery Mobile framework.

// Remove Google Map Divs - there is only one allowed (= ID)
$('.gMaps').remove();
 
// Add a new Google Map Div at the active page
$('<div id="divGoogleMap" class="gMaps removeMarginTop">loading Map...</div>').insertBefore('.ui-page-active .googleMapFunctions');
 
// Initialize the Google Map with a marker
map = PowerHour.GoogleMap.initializeWithMarker(	"divGoogleMap",	locationMarker, 16);

This code has to be executed on the same site you want to display your Google Map and of course before you initialize the Google Map. Of course you need to include the Google Map javascript API files.
And now we can load page after page and the Map is shown on the right (and active) page.

Be Sociable, Share!

• 

Filed under: Google API, jQuery, jQuery Mobile, Google Map, jQuery Mobile