Jquery Mobile google maps , i have to refresh the page to show map

Question

I am making an application that show positions on maps, I have a page that links to the map, when I click that link, its change to the map page without load the map.

So I have to click the browser back button and refresh the page that have the link, after that I click again the link and the map is loaded at this time, so if you can help me to load the map with out refresh i will be grateful

<div data-role="page">
        <div data-role="header">
            <a href="menudep.jsp" data-icon="back" data-theme="c">Atras</a>
            <h1><%=corto%></h1>
            <h4><img src="../images/logo_mich.png" width="40" height="40" /></h4>
            <a href="mobilelaip.html" data-icon="home" data-theme="c">Inicio</a>
        </div>
        <div data-role="content">
            <p>
                <%=descrip%>
            </p>
            <a href="map3.html">Ubicación</a>
            <ul data-role="listview" data-inset="true">

                <li><a href="oficio.jsp?dep=<%=id_dep%>">Info. Oficio</a></li>
                <li><a href="contacto.jsp?dep=<%=id_dep%>" data-rel="dialog">Contacto</a></li>
                <li><a href="paginaweb.jsp?dep=<%=id_dep%>" data-inline="true" data-rel="dialog">Pagina Web</a></li>             

            </ul>
        </div>
    </div>  


     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">
        // When map page opens get location and display map
        $('.page-map').live("pagecreate", function() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    initialize(position.coords.latitude,position.coords.longitude);
                });
            }
        });

        function initialize(lat,lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 20,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            new google.maps.Marker ( 
            { 
                map : map, 
                animation : google.maps.Animation.DROP,
                position : latlng  
            });
        }
    </script>

And the map3.html code is this

<div data-role="page" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Mapa</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;"> 
    <div id="map_canvas" style="width:100%; height:100%;"></div>
</div>

thanks for your answers

Answer 1

Here you have some example code I used succesfully. I used plugin: https://code.google.com/p/jquery-ui-map/

For not having to refresh, you can use "pageshow" event.

INDEX

<div data-role="page" id="pagWienerMundo" data-theme="a">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-ui-map.min.js" type="text/javascript"></script>

    <div role="main" class="ui-content">
       <div id="map_canvas">
       </div>
    </div><!-- /content --> 
</div><!-- /page map -->

JAVASCRIPT

$(document).on("pageshow","#pagMap", function () {
    if (!(typeof google === 'object' && typeof google.maps === 'object'))
        $("#map_canvas").empty().append('<h3 style="color:#db393b;text-align:center">Connect to internet</h3>');
    else
    {
        $("#pagWienerMundo [role='main']").css("padding","0em");
        $('#map_canvas').css("width", "100%");
        $('#map_canvas').css("height", "450px");
        $('#map_canvas').gmap().bind('init', function() { 
            $.each( mapObj, function(i, marker) {
                $('#map_canvas').gmap('addMarker', { 
                    'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                    'bounds': true 
                }).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
                });
            });
        });
    }
});

JSON

mapObj=
[
  {
    "content" : "Example text to show on marker",
    "latitude": -32.95845,
    "longitude": -60.66764,

  }
]

Assuming you have json object locally and in scope (for example declared as global)

Answer 2

Few things about your code, some of them could be a problem. I can't be 100 % sure because I can see only portions of your code.

From what I can see you are using several html pages to show your application. jQuery Mobile uses ajax to load additional pages (unless this is turned off) so there's no point in loading the HEAD content of additional pages, even more, jQuery Mobile will load only DIV with data-role="page" while everything else will be discarded. If you javascript is placed inside a HEAD or at the end of BODY content, basically anywhere outside page DIV it will be removed. Follow this or this solutions to fix this problem.

Other problem I can see is live method, while still usable (removed from jQuery 1.9 and above) if initialized in a wrong moment it will not trigger correctly. So change it to this:

$(document).on('pagecreate', '.page-map', function() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            initialize(position.coords.latitude,position.coords.longitude);
        });
    }
});

Third thing, this line:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

must be initialized before jQuery and jQuery Mobile so initialize it inside your main html file.

Finally here's my blog article about jQuery Mobile implementation of Google maps. Feel free to leave a comment if you need more information.