I'm building a site for a customer who wants a map on their "About Us" page showing their locations. I have the map working and fully functional on the desktop site (www.al-van/jake/aboutUs.html) using the Google Maps Javascript API. Everything is going good but when I try to view the site on my android device, I just get an "Oops something went wrong see the error console for more technical information" which doesn't help me a whole lot. I can't seem to figure out what is going on and why it won't work on mobile. I need to use the Javascript API because the client wants 2 locations on the map and the embed api won't do that. Here is my JS, the HTML is a simple div with a bootstrap framework.

<script>
    function initMap()
    {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: {lat: 42.389795, lng: -86.258617},
            styles: [
                {elementType: 'geometry'},
                {elementType: 'labels.text.stroke'},
                {elementType: 'labels.text.fill'}
            ]
        });
        // array used to label markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        // Add some markers to the map.
        var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });
        });
        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 
'googlemaps/m'});
    }
    var locations = [
        {lat: 42.390337, lng: -86.259642},
        {lat: 42.388635, lng: -86.257246}
    ]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="? 
 key=API_KEY&callback=initMap"></script>

I'm building a site for a customer who wants a map on their "About Us" page showing their locations. I have the map working and fully functional on the desktop site (www.al-van/jake/aboutUs.html) using the Google Maps Javascript API. Everything is going good but when I try to view the site on my android device, I just get an "Oops something went wrong see the error console for more technical information" which doesn't help me a whole lot. I can't seem to figure out what is going on and why it won't work on mobile. I need to use the Javascript API because the client wants 2 locations on the map and the embed api won't do that. Here is my JS, the HTML is a simple div with a bootstrap framework.

<script>
    function initMap()
    {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: {lat: 42.389795, lng: -86.258617},
            styles: [
                {elementType: 'geometry'},
                {elementType: 'labels.text.stroke'},
                {elementType: 'labels.text.fill'}
            ]
        });
        // array used to label markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        // Add some markers to the map.
        var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });
        });
        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 
'googlemaps/m'});
    }
    var locations = [
        {lat: 42.390337, lng: -86.259642},
        {lat: 42.388635, lng: -86.257246}
    ]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis./maps/api/js? 
 key=API_KEY&callback=initMap"></script>

• javascript
• google-maps-api-3
• google-api-javascript-client

• You can always connect devtools to an android device via ADB over USB to see the error. – Jared Smith Commented Jun 21, 2018 at 13:20
• It's almost 100% certain that the error is reproducible on a desktop website, so just visit it on your PC and open up dev tools. – Adam Jenkins Commented Jun 21, 2018 at 13:21
• 1 It works fine on my PC. No issues. I did have a similar issue that was fixed by enabling the correct API restriction but now that the Maps Javacript API is enabled, it should be working and it is on PC – sylphaxiom Commented Jun 21, 2018 at 13:23
• @sylphaxiom Are you 100% positive the mobile site is loading the same HTML - i.e. is using the same API key (sounds like a dumb question, but double check)? – Adam Jenkins Commented Jun 21, 2018 at 13:26
• I only have one version of aboutUs.html uploaded to the server. I had a friend with a different phone check it as well. He has the same error on his Pixel. It may be an issue with Android Chrome. – sylphaxiom Commented Jun 21, 2018 at 13:38

2 Answers 2

After working with Google Support, it seems that the issue is in the way that the android Chrome puts in the website. I had explicitly set my allowed HTTP referrers all including www.blahblahblah. and various variations using wildcards. What I DID NOT DO was include a wildcard in place of the "www" When I placed my wildcard as blahblah. it allowed it to work on the mobile phone. For some reason, unless you explicitly type "www.example." into your android Chrome browser, it will not auto-fill the "www." This is what solved my issue, I hope it helps in the future.

Your API key is invalid for the domain, or is over it's quota limit.

Go here: https://developers.google./maps/documentation/javascript/get-api-key

To get an API key for the domain you are using.