Home/ Questions/Q 7830045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T11:03:17+00:00

Im trying to use the Geolocation API with Jquery Mobile. Everything works fine if

  • 0

Im trying to use the Geolocation API with Jquery Mobile. Everything works fine if i browse directly to my page from the browser.

But, if i navigate to it from another page, it does not load.

Also, if i remove the line of code with the “pageinit” command, i get the same issue/error but if i refresh the page it will load.

I know it has something to do with the way the DOM is handled through AJAX but i cant seem to get it to work the way it should/i want it to.

<!DOCTYPE html>
<html>
<head>
    <title>My Location</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

</head>
<body>
    <div data-role="page" id="geoPage">


        <script type="text/javascript">

            $("#geoPage").live("pageinit", function() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(success, error);
                } else {
                    error('Geolocation not supported');
                }
            });

            function success(position) {
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var mapcanvas = $('#mapcanvas');
            var map = new google.maps.Map(mapcanvas[0], myOptions);
            var marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                title:"I am here!"
            });


            //alert(latlng);


            }


            function error(msg) {
                var errMsg = typeof msg == 'string' ? msg : "Geolocation failed";
                $('#msg').html(errMsg);
            }


            $("#continue7").click(function(e){


                $.mobile.changePage( "extension.htm", { transition: "slide"} );


            });
        </script>


        <div data-role="header">
            <h1>My Location</h1>
        </div>
        <div data-role="content">
            <div id="msg"></div>
            <div id="mapcanvas" style="height: 250px; width:250px;"></div>
            <input id="continue7" type="button" value="Conintue" />



        </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The documentation for how to handle the pageinit event is slightly different than your approach — at least the section of the documentation I was looking at. Their suggestion is that you would code it like this:

    $( document ).delegate("#geoPage", "pageinit", function() {
    // Handle it
}

    The documentation sounded like you have placed your function in the best location if you want to bind this way.

    Edit:

    Notably, this particular page describes binding exactly as you have shown (but adds event into the anonymous function which I don’t think should affect your situation). This leads me to believe that you might have a javascript error in your Developer Tools Console when you navigate from another page and the page gives off an appearance of ‘not working’. Be sure to check for that in your Developer Tool of choice.

    Edit:

    The solution for you is that you need to include your google maps javascript ‘include’ somewhere within the data-role='page' element. Jquerymobile is going to ignore everything outside of that every time it does an AJAX page load. Alternatively, you could turn all links into this page into data-ajax="false".

    Include the following line inside of your data-role=”page” or include it in the html <head> for every page.

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

    Be sure to really read and let the original link sink in. Best practice is that you have the same <head> element for every page and include it rather than copy-paste it.

    • 0