1 Reply Latest reply on Nov 22, 2011 2:29 PM by mytaxsite.co.uk

    Need help with Geolocation using mobile templates (phonegap)!

    fredex124

      Can someone please help me get Geolocation to work. I am using the mobile templates in dreamweaver. When I try the same code in a regular html page it works but when I try using the mobile templates it does not work. In a regular html I get prompted for permission to locate but i can't even get that far on my mobile app. Please see code below. Thanks.

       

       

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>jQuery Mobile Web App</title>
      <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
      <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
      <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>


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

      $(document).ready(function(){
           $("#getLoc").click(function(event){
            alert("getting location..!");
         initialize();
           });
        });


      var initialLocation;
      var siberia = new google.maps.LatLng(60, 105);
      var newyork = new google.maps.LatLng(40.784199, -73.842201);
      var browserSupportFlag =  new Boolean();

      function initialize() {
      //alert("init!");
        var myOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       
        // Try W3C Geolocation (Preferred)
        if(navigator.geolocation) {
          browserSupportFlag = true;
          navigator.geolocation.getCurrentPosition(function(position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            map.setCenter(initialLocation);
          }, function() {
            handleNoGeolocation(browserSupportFlag);
          });
        // Try Google Gears Geolocation
        } else if (google.gears) {
          browserSupportFlag = true;
          var geo = google.gears.factory.create('beta.geolocation');
          geo.getCurrentPosition(function(position) {
            initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
            map.setCenter(initialLocation);
          }, function() {
            handleNoGeoLocation(browserSupportFlag);
          });
        // Browser doesn't support Geolocation
        } else {
          browserSupportFlag = false;
          handleNoGeolocation(browserSupportFlag);
        }
       
        function handleNoGeolocation(errorFlag) {
          if (errorFlag == true) {
            alert("Geolocation service failed.");
            initialLocation = newyork;
          } else {
            alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
            initialLocation = siberia;
          }
          map.setCenter(initialLocation);
        }
      }

      </script>

      </head>
      <body>

      <div data-role="page" id="page">
      <div data-role="header">
        <h1>Page One</h1>
      </div>
      <div data-role="content">
           <p>
              
                  <a href="#" data-role="button" data-inline="false" data-theme="a" id="getLoc">get Location</a>

              </p>
              <div id="map_canvas"></div>
              <p></p>
        <ul data-role="listview">
               <li><a href="#page2">Page Two</a></li>
                  <li><a href="#page3">Page Three</a></li>
         <li><a href="#page4">Page Four</a></li>
        </ul> 
      </div>
      <div data-role="footer">
        <h4>Page Footer</h4>
      </div>
      </div>

      <div data-role="page" id="page2">
      <div data-role="header">
        <h1>Page Two</h1>
      </div>
      <div data-role="content" id="map_canvas">
        Content 
      </div>
      <div data-role="footer">
        <h4>Page Footer</h4>
      </div>
      </div>

      <div data-role="page" id="page3">
      <div data-role="header">
        <h1>Page Three</h1>
      </div>
      <div data-role="content">
        Content 
      </div>
      <div data-role="footer">
        <h4>Page Footer</h4>
      </div>
      </div>

      <div data-role="page" id="page4">
      <div data-role="header">
        <h1>Page Four</h1>
      </div>
      <div data-role="content">
        Content 
      </div>
      <div data-role="footer">
        <h4>Page Footer</h4>
      </div>
      </div>

      </body>
      </html>