0

Google Map doesn't up at this website, http://165.232.77.75:8080/contact.html. It doesn't load up properly though I already replace the real API key. I even already configured properly in Restrict and rename API key at Google Cloud Platform. Btw, this is simple static site. It has nothing to do with backend & database. Here's my code:

               <script>
                    function initMap() {
                        var uluru = {
                            lat: -25.363,
                            lng: 131.044
                        };
                        var grayStyles = [{
                            featureType: "all",
                            stylers: [{
                                saturation: -90
                            }, {
                                lightness: 50
                            }]
                        }, {
                            elementType: 'labels.text.fill',
                            stylers: [{
                                color: '#ccdee9'
                            }]
                        }];
                        var map = new google.maps.Map(document.getElementById('map'), {
                            center: {
                                lat: -31.197,
                                lng: 150.744
                            },
                            zoom: 9,
                            styles: grayStyles,
                            scrollwheel: false
                        });
                    }
                </script>
                <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQSuGVy_L5m4vVVI55pm_X8I1Y0MDk72s&callback=initMap" type="text/javascript"></script>

And, images of messages, "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." at the website and also images of Restrict and rename API key.

enter image description here

enter image description here

enter image description here

enter image description here

AlLeon
  • 1
  • 2
  • see the error? `15:04:56.471 Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://165.232.77.75:8080/contact.html js:70:449` that's something you need to fix in your googol account – Jaromanda X Sep 09 '20 at 05:05
  • Did you read the error? – Andy Ray Sep 09 '20 at 05:06
  • this might help https://stackoverflow.com/questions/35288250/google-maps-javascript-api-referernotallowedmaperror – nmanikiran Sep 09 '20 at 05:09
  • your googol api key in the request is `AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I` - but .... according to your screenshots, your googol API key is `AIzaSyBQSuGVy_L5m4vVVI55pm_X8I1Y0MDk72s` - so .... – Jaromanda X Sep 09 '20 at 05:09
  • I already changed the API Key but it still showing up the error.. @JaromandaX – AlLeon Sep 09 '20 at 05:12
  • Ok, i will check it out. Thx! @nmanikiran – AlLeon Sep 09 '20 at 05:12
  • huh? your requests are STILL using `AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I` - so ... you haven't succeeded - you also have many other errors in that page – Jaromanda X Sep 09 '20 at 05:14
  • No, im using this API Key: AIzaSyBQSuGVy_L5m4vVVI55pm_X8I1Y0MDk72s... @JaromandaX – AlLeon Sep 09 '20 at 05:18
  • @nmanikiran I set it to IP addresses in Application restrictions at Google Cloud Platform. Not HTTP referrers. – AlLeon Sep 09 '20 at 05:25
  • I will go through here: https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error%20Your%20site%20URL%20to%20be%20authorized:%20http://165.232.77.75:8080/contact.html%20js:70:449 Thx, @JaromandaX – AlLeon Sep 09 '20 at 05:31

0 Answers0