Current Location Google Maps / jQuery Mobile

Current Location Google Maps / jQuery Mobile

Hey, I'm trying to get my current location to register with jquery mobile.  However, after many attempts I'm coming up with a blank screen.  Can anyone point the direction?  (This is the initial events of a rather large project, so baby steps....)


or, my code:

  2. <!DOCTYPE html>
  3. z<html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta charset="utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />   
  9. <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
  10. <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
  11.         <script type="text/javascript" src="scripts/geometa.js"></script>
  12. <title>Let's Role</title>
  13.     </head>
  14.     <body>
  16.         <div id="main" data-role="page" data-theme="a">
  17.          <header data-role="header">
  18. <h1>Let's Role With That</h1>
  19. </header>
  21. <div data-role="content">
  22. <ul id="main-list" data-role="listview">
  23. <li><a href="#locate">Locate Me</a></li>
  24. <li><a href="favorites.html">My Favorites</a></li>
  25. </ul>
  26. </div>
  29. <footer data-role="footer">
  31. <h4>THIS IS THE FOOTER</h4>
  32. </div>

  34. </div>  <!--/page -->

  36. <!-- Stage of Second Page -->
  37. <div data-role="page" id="locate">
  39. <div data-role="header">
  40. <h1>LOCATE ME</h1>
  41. </div>
  43. <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAlNG2pfxjXcCxkBG2ublnFBQ_HY9EEplWU1n86FkY6-9EgsoTLRSbMiYOA1TNU2HQ-7scaBtUFQfuMg"> 
  44. google.load("maps", "2.x");
  45. google.setOnLoadCallback(function() {
  46. if (navigator.geolocation) {
  47. navigator.geolocation.getCurrentPosition(function(position) {
  48. var location = "";
  49. if (navigator.geolocation.type == "Gears") {
  50. if (position.gearsAddress) {
  51. location = [position.gearsAddress.city, position.gearsAddress.region, position.gearsAddress.country].join(', ');
  52. } else {
  53. location = "Zoomed in on: " + position.latitude + ", " + position.longitude;
  54. }
  55. } else if (navigator.geolocation.type == "ClientLocation") {
  56. location = [position.address.city, position.address.region, position.address.country].join(', ');
  57. } else if (position.coords) {
  58. position.latitude = position.coords.latitude;
  59. position.longitude = position.coords.longitude;
  60. }
  61. createMap(position.latitude, position.longitude, location);
  62. }, function() {
  63. document.getElementById('cantfindyou').innerHTML = "Crap, I don't know. Good hiding!";
  64. });        
  65. } else {
  66. document.getElementById('cantfindyou').innerHTML = "Crap, I don't know. Good hiding!";
  67. }
  68. });
  69.  
  70. function createMap(lat, lng, location) {
  71. var mapElement = document.getElementById("map_canvas");
  72. mapElement.style.display = 'block';
  73. var map = new google.maps.Map2(mapElement);
  74. map.addControl(new GLargeMapControl());
  75. map.addControl(new GMapTypeControl());
  76. map.setCenter(new google.maps.LatLng(lat, lng), 13);
  77. map.openInfoWindow(map.getCenter(), document.createTextNode(location));
  78. }
  79. </script>
  80. <div data-role="content">
  81. <div id="map_canvas" style="width:300px; height:300px">
  82. </div><br/>
  83. <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="b"> 
  84. <li><a href ="video1.html">Location #1</a></li>
  85. <li><a href ="video1.html">Location #2</a></li>
  86. <li><a href ="video1.html">Location #3</a></li>
  87. <li><a href ="video1.html">Location #4</a></li>
  88. </ul>
  89. </div>  
  93. <div data-role="footer">
  94. <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="b"> 
  95. <li><a href="#main" data-icon="main">Home</a></li>
  96. <li><a href="favorites.html" data-icon="vendor">My Favorites</a></li>
  97. </ul> 
  99. </div>

  101. <div>
  102. </body>
  103. </html>