gmaps4rails on jQueryMobile don't work

Question

I tried gmaps4rails on jQueryMobile Framework.

One page is only link to gmaps page. Two page is gmaps4rails page.

jQueryMobile ajax page enabled. From one page to two page don't display gmaps. But Two page direct access is success display gmaps.

This is my repository. https://github.com/y-hirasawa/sample-jqm-map

I want to use ajax pages, and display gmaps. Help me.

Answer 1

• You need to include the googlemaps javascript files in your layout:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&amp;libraries=geometry"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>

• the map is created thanks to a window.onload callback. Since the page is already loaded, it fails. So you have to add a jquery mobile callback in your application.js:

$('#gmaps').live('pageshow',function(event){

  Gmaps.loadMaps(); 

});

• If you want this to work, you have to set an id to the page containing the google map:

<div class="page" data-role="page" id="gmaps">

• Last, you must prevent double loading of scripts, so change your call to the gmaps4rails helper:

<%= gmaps4rails(@json, false, false) %>