CODEWITHSUNDEEP
androidjquery-mobilegoogle-maps-api-3phonegap-buildwhitelist
Erik Grosskurth
Erik Grosskurth

Reputation: 3932

Google Maps Javascript API V3 getting 404 not found on mobile/native App

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 

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)

In the head of the doc I have:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey"></script>
<script src="js/locations.js" type="text/javascript"></script>

In the network console I get:

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

In my config.xml file I have included these lines:

<preference name="orientation" value="portrait" />
<preference name="Fullscreen" value="true" />
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />

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:

$(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!"
        });
    }
});

I have also tried changing the API's href to "http" instead of "https"

Upvotes: 2

Views: 3069

Answers (1)

Erik Grosskurth
Erik Grosskurth

Reputation: 3932

After some digging, I came upon some documentation here:

Apparently you have to add in the whitelisting plugin instead of it being native so I changed my config.xml file to this:

 <access origin="http://*.phonegap.com" subdomains="true" />
        <access origin="*://*.googleapis.com/*" subdomains="true" />
        <access origin="*://*.gstatic.com/*" subdomains="true" />
        <access origin="*://*.google.com/*" subdomains="true" />
        <access origin="*://*.googleusercontent.com/*" subdomains="true" />

        <plugin name="cordova-plugin-whitelist" />

It works now in the mobile app and I can use external resources that I whitelist as well.

Upvotes: 7

Related Questions