CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Pisan Chueachatchai
Pisan Chueachatchai

Reputation: 107

Oops! Something went wrong. 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

API error: RefererNotAllowedMapError 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
    async defer></script>
  </body>
</html>

Upvotes: 5

Views: 99615

Answers (7)

PhysTutor
PhysTutor

Reputation: 41

I had the same problem, trying to use Google Maps API. Got the same message to go look into JavaScript Console. What a waste of time!

In my case the problem was that I mistyped the domain name (the referrer) when getting the Browser API key from Google.

Fixing the name of the referring domain (http://example.com/*) inside Google API site solved the problem for me.

Upvotes: 4

Homesh Paul
Homesh Paul

Reputation: 151

  1. Go to https://console.developers.google.com/apis/credentials
  2. Click your API key’s name to edit its settings.
  3. Under Application restrictions, make sure “HTTP referrers (web sites)” is selected and that you have added the two entries below (replacing yourname.com with your own domain). Both are necessary and be sure that have you appended /* to the end.

Example :

yourname.com/* *.yourname.com/*

4.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: 0

AD - Stop Putin -
AD - Stop Putin -

Reputation: 305

Please take a look at Google maps api tutorial: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map

When reading carefully, you will see that a key, YOUR_API_KEY, is needed

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

To get your key go here: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key

Upvotes: 8

Webdrips
Webdrips

Reputation: 265

I had this same problem when going live with a site on a new host with a page that included an embedded map that had not been on the site previously. The map had worked on my development site, so this was a surprise to me as well.

If you landed on this page doing a Google search, you'll want to start here: https://developers.google.com/maps/documentation/javascript/get-api-key.

If you wish to read the announcement about the API key requirement, read this: https://googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html

Also note, in my case anyway, "&callback=initMap" caused an error.

Upvotes: 1

dwerty
dwerty

Reputation: 17

You can refer the Google Maps documentation for different error codes here : https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

The above error code is described in the documentation as below:

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.

Please check the link to the maps documentation for error messages for more details.

Google Maps now requires the use of a Google Maps API key to display a map on your site as per this article: https://googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-google.html.

Upvotes: 0

Nandam Mahesh
Nandam Mahesh

Reputation: 1278

Replace your googleApi maps plugin with this...

"https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>

  </body>
</html>

Hope it works for you.

Upvotes: 1

Lucky Chandra
Lucky Chandra

Reputation: 7

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
    async defer></script>
  </body>
</html>

Upvotes: -6

Related Questions