CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
hashim
hashim

Reputation: 69

This page didn't load Google Maps correctly. See the JavaScript console for technical details

Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.

i don't know why .

<!DOCTYPE html>
<html>
<head>
    <script src="http://maps.googleapis.com/maps/api/js">
    </script>

    <script>
        var myCenter = new google.maps.LatLng(30.023354, 31.477439);

        function initialize() {
            var mapProp = {
                center: myCenter,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            var marker = new google.maps.Marker({
                position: myCenter,
            });

            marker.setMap(map);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>

    
</body>
</html>

Upvotes: 0

Views: 5886

Answers (2)

Ibraheem Olayanju
Ibraheem Olayanju

Reputation: 11

Here’s how to fix the error.

Go to https://console.developers.google.com/apis/credentials Click your API key’s name to edit its settings. Under Application restrictions, choose “HTTP referrers (web sites)” then add the two entries below (replacing yourname.com with your own domain).

Type the first entry then hit enter on your keyboard to add it. Repeat to add the second entry.

Having both entries (with asterisks) will help ensure your maps work on any URL of your website. yourname.com/* *.yourname.com/*Google Maps API Restrictions

Click the Save button then wait a few minutes for the change to take effect (Google says it can take up to 5 minutes).

Upvotes: 1

Bartłomiej Gładys
Bartłomiej Gładys

Reputation: 4615

You need generate special api key for google maps

your <script src="http://maps.googleapis.com/maps/api/js"> should looks like this

  <script src="https://maps.googleapis.com/maps/api/js?key=your_key">></script

Go to https://console.developers.google.com to get a free key.

Upvotes: 4

Related Questions