title: google api using phonegap not showing map and latitude and longitude
body: <p>I am using Google Maps using Phone Gap. It's working on a mobile website that I have created using jquerymobile framework, but when I copy the project in Eclipse using phonegap to test it on the emulator it does not work.its working on actual device but not working on emulator.</p>
  
  <p>Code files:</p>
  
  <p>config.xml</p>
  
  <pre><code>&lt;access origin="*" subdomains="true"/&gt;
   &lt;access origin="google.com"; /&gt; 
  &lt;access origin="maps.google.com"/&gt;
   &lt;access origin="google.com"; /&gt;
   &lt;access origin="maps.google.com*"/&gt;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
       &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
  
     &lt;meta name="viewport" content="width=device-width,initial-scale=1"/&gt;
  
  &lt;!-- CSS Style Sheetes --&gt;
  
      &lt;link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/stylesheet.css" /&gt;
       &lt;link rel="icon" href="images/IconTaxi.png" type="image/x-icon"&gt;
  
  &lt;!--  JavaScript --&gt;
  
       &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script src="js/main.js" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;     &lt;/script&gt;
        &lt;script src="js/cordova.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div data-role="page" id="page"&gt;
      &lt;div class="headerStyle"&gt;
          &lt;h2 class="headingHeader"&gt;&lt;img class="headerImage" src="images/flag.png" alt"United Arab Emirates" / &gt;&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="logo"&gt;&lt;/div&gt;
      &lt;h1 class="headingImage"&gt;Welcome &lt;/h1&gt;
      &lt;div data-role="content"&gt;   
          &lt;ul data-role="listview" class="mainmenu"&gt;
              &lt;li&gt;&lt;a href="companyList.html"&gt;Get Companies&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#AboutUs"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;       
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On this page I am showing  map when user switch on userRequest.html:</p>
  
  <pre><code>        &lt;!DOCTYPE HTML&gt;
                 &lt;html&gt;
                  &lt;head&gt;
                  &lt;/head&gt;
  
                 &lt;body&gt;
  
                 &lt;div id="userRequest" data-role="page" &gt;
  
              &lt;div data-role="header" data-position="fixed"&gt;
                  &lt;a href="companyList.html" data-role="button" class="ui-btn-left" data-icon="back" data-inline="true" data-transition="slide" data-theme="e"&gt;Back&lt;/a&gt;
              &lt;h1 id="getComapnyHeader"&gt;&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content" id="requestForm" style="background:none"&gt;           
                 &lt;div class="content-primary"&gt;
                     &lt;form id="userOrder"&gt;
                          &lt;div style="padding:10px 0px;"&gt;
                            &lt;label for="userName" class="ui-hidden-accessible"&gt;Username:&lt;/label&gt;
                            &lt;input type="text" name="userName" required ="required" id="userName" value="" placeholder="Your Name" required data-theme="e" /&gt;
  
                            &lt;label for="userPhone" class="ui-hidden-accessible"&gt;PhoneNumber:&lt;/label&gt;
                            &lt;input type="tel" name="userPhone" required ="required" id="userPhone" value="" placeholder="PhoneNumber" required data-theme="e" /&gt;
                          &lt;/div&gt;
                          &lt;div id="map"&gt;&lt;/div&gt;
                      &lt;/form&gt;
  
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>$(document).ready(function () {
      // setup global error handler
      window.onerror = function (message, url, lineNumber) {
          console.log([lineNumber, url, message].join(" "));
          return false;
      };
  
      console.log("document.ready");
      console.log(window.location.hash);
  
      // start the app
      app.init();
  });
  
  var app = app || { _timeStart: null };
  
  app.init = function () {
  
      app.Lati = 0;
      app.longi = 0;
      $('#userRequest').live('pageshow', function(e) { app.getGeoLocation(e); });
   });
  
  };
  
  app.getGeoLocation = function(e) {
  
      navigator.geolocation.getCurrentPosition(app.onGeoSuccess, app.onGeoError);
  
  }; 
  
  app.onGeoError = function(error) {
      if(error == 1 )
      {
          alert("Turn On Geo Location");
      }
  };
  
  app.onGeoSuccess = function(position)
  {
       var lat = position.coords.latitude;
       var lon = position.coords.longitude;
       var currentPosition = new google.maps.LatLng(lat, lon);
  
      var mapOptions = {
              zoom: 12,
              center: currentPosition,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: true
          };
  
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
          var marker = new google.maps.Marker({
              position: currentPosition, 
              map: map, 
          });
  
          app.Lati = lat;
          app.longi = lon;
          console.log(app.Lati);
  
  };
  </code></pre>