title: Google Maps Javascript API V3 getting 404 not found on mobile/native App
body: <p>I can get Google Maps to show up in a browser with no problem. When I package my application up with phonegap build it does not work. In my remote debugging session it says that </p>
  
  <pre><code>https://maps.googleapis.com/maps/api/js?key=My_Key_Goes_Here 
  Failed to load resource: the server responded with a status of 404 (Not Found)
  </code></pre>
  
  <p>In the head of the doc I have:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey"&gt;&lt;/script&gt;
  &lt;script src="js/locations.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In the network console I get:</p>
  
  <pre><code>Request URL:http://maps.googleapis.com/maps/api/js?key=MyKeyHere
  Request Method:GET
  Status Code:404 Not Found (from cache)
  Response Headers
  Client-Via:shouldInterceptRequest
  Request Headers
  Provisional headers are shown
  Accept:*/*
  User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; SM-T530NU Build/LRX22G; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/46.0.2490.76 Safari/537.36
  Query String Parameters
  view source
  view URL encoded
  key: MyKeyDisplayedHere
  </code></pre>
  
  <p>In my config.xml file I have included these lines:</p>
  
  <pre><code>&lt;preference name="orientation" value="portrait" /&gt;
  &lt;preference name="Fullscreen" value="true" /&gt;
  &lt;access origin="*://*.googleapis.com/*" subdomains="true" /&gt;
  &lt;access origin="*://*.gstatic.com/*" subdomains="true" /&gt;
  &lt;access origin="*://*.google.com/*" subdomains="true" /&gt;
  &lt;access origin="*://*.googleusercontent.com/*" subdomains="true" /&gt;
  </code></pre>
  
  <p>I am using jQuery Mobile and I am not displaying the map on the first page but another page. Regardless, it gives a 404 when trying to get from the API but here is the JS code in the locations.js file:</p>
  
  <pre><code>$(document).on('pageshow', "#map-page", function() {
      var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
      if ( navigator.geolocation ) {
          function success(pos) {
              // Location found, show map with these coordinates
              drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          }
          function fail(error) {
              drawMap(defaultLatLng);  // Failed to find location, show default map
          }
          // Find the users current position.  Cache the location for 5 minutes, 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) {
          var myOptions = {
              zoom: 10,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
          console.log('hey');
          // Add an overlay to the map of current lat/lng
          var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              title: "Greetings!"
          });
      }
  });
  </code></pre>
  
  <p>I have also tried changing the API's href to "http" instead of "https"</p>