title: Google Maps JS API v3 not Geolocating with Phonegap iOS 3.5.0 and jQuery Mobile
body: <p><strong>The Setup</strong></p>
  
  <p>Currently building my phone gap iOS app which includes geolocation in addition to sending the results to a database and getting back nearby locations. Because I am using jQuery Mobile and Phonegap, I was testing on a browser to perfection, geolocation was success and everything returned was as well. On the iOS device, not so much. When sending a set latitude and longitude, everything returned successfully, but when using the google maps geolocation, and eventually the cordova plugin for geolocation, both failed as unable to find my location, even though they are the exact same code, minus the phone gap initializer on the website.</p>
  
  <p><strong>The Code</strong></p>
  
  <p><em>jQuery</em></p>
  
  <pre><code>document.addEventListener("deviceready", onDeviceReady, false);
  
  function onDeviceReady() {
  $(document).ready(function () {
      //Load Google Map &amp; Geolocate
      $(document).on("pagecreate", "#game", function () {
          // keep as separate function call to allow for DOM to update after a tag
          loadGoogleMap();
      });
  
      function loadGoogleMap() {
              var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); //default location is Hollywood, CA
  
              if (navigator.geolocation) {
                  function success(pos) {
                      //set fields for current user latitude and longitude
                      $("#lat_in").val(pos.coords.latitude);
                      $("#lon_in").val(pos.coords.longitude);
  
                      //location found
                      drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                  }
  
                  function fail(error) {
                      //try cordova geolocation plugin
                      function onSuccess(position) {
                          alert("CDV position success");
                          //alert(position.coords.latitude);
                          //alert(position.coords.longitude);
                      }
  
                      function onError(error) {
                          alert("CDV position error");
                          //alert("code: " + error.code + "\n" + "message: " + error.message);
                      }
  
                      navigator.geolocation.getCurrentPosition(onSuccess, onError);
  
                      alert("CDV position fail. Google geolocate fail"); //WHERE THE ERROR IS THROWN. THIS IS ALWAYS THE OUTCOME
  
                      //drawMap(defaultLatLng); //Failed to find location. Show default location
                  }
  
                  //Geolocate. Cache location for 5 mins. Timeout after 6 seconds
                  navigator.geolocation.getCurrentPosition(success, fail, {
                      maximumAge: 500000,
                      enableHighAccuracy: true,
                      timeout: 6000
                  });
              } else {
                  drawMap(defaultLatLng); //No geolocation support, show default map
              }
  
              function drawMap(latlng) {
                      //Collect Data to Send
                      var uname = $("#unm_in").val();
                      var lat = $("#lat_in").val();
                      var lon = $("#lon_in").val();
  
                      var myOptions = {
                          zoom: 16,
                          center: latlng,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                      };
  
                      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  
                      //update latitude and longitude on DB for logged in user &amp;&amp; get nearby users
                      $.post("PHP_ON_SERVER", {
                          uname: uname,
                          lat: lat,
                          lon: lon
                      }, function (data) {
                          $.each(data, function (key, value) {
                              //Define variables
                              var allUsrLoc = new google.maps.LatLng(value.lat, value.lon);
                              var contentString = value.uname;
                              var mkrImg = "inUsrIcon.png"; //icon for logged in user
                              var inUserName = value.fname + " " + value.lname;
  
                              //if info belongs to current user
                              if (contentString === uname) {
                                  var marker = new google.maps.Marker({
                                      position: allUsrLoc,
                                      map: map,
                                      title: "Player",
                                      icon: mkrImg
                                  });
  
                                  //change header to name and points
                                  $("#inUserInfo").text("Hi " + inUserName + " || You have " + value.points + " points");
  
                                  //disable tag button if not it
                                  if (value.isit === "notit") {
                                      $("#tagBtn").addClass("ui-state-disabled");
                                  }
                              }
  
                              //if not current user and is not it
                              else if (contentString != uname &amp;&amp; value.isit != "it") {
                                  var marker = new google.maps.Marker({
                                      position: allUsrLoc,
                                      map: map,
                                      title: "Player"
                                  });
  
                                  google.maps.event.addListener(marker, 'click', function () {
                                      //Change selected player hidden field to match marker
                                      $("#unm_sel").val(contentString);
                                      $("#lat_sel").val(value.lat);
                                      $("#lon_sel").val(value.lon);
                                      $("#isit_sel").val(value.isit);
  
                                      //Change tag button to selected player's username
                                      $("#tagBtn").text("Tag " + contentString);
                                  });
                              }
  
                              //no condition for if not current user and is it. TBD if anything will come
                          });
                      }, "json");
                  } //end drawMap
          } // end loadGoogleMap
  }
  </code></pre>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;div data-role="content" role="main" id="map-canvas"&gt;
  &lt;!-- Map loads here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Some More to Know</strong></p>
  
  <p>I have been reading up on other related questions, but none of the others do work. Either they say use the plugin, which I am to no avail, or set <code>&lt;access origin="*" /&gt;</code> which I am doing already. In addition, most of the other questions revolve around pre-3.0.0 versions of phone gap, which was its own monster. Also, the map loads, just no markers display. On the DB, the user who's location is being updated is set to (0,0). Lastly, when using geolocation in any other app, the iOS device I test on is successfully finding my location. In addition, I am testing on the same WiFi network as the browser which worked, so anything relating to internally being unable to locate due to network or hardware is ruled out.</p>
  
  <p><em>If you want to see the working example, just ask.</em></p>