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:

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

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

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

  85. <div>
  86. </body>
  87. </html>