web-dev-qa-db-fra.com

Oops! Quelque chose s'est mal passé. Cette page n'a pas chargé Google Maps correctement. Voir la console JavaScript pour les détails techniques

Oops! Une erreur s'est produite .. Cette page n'a pas chargé Google Maps correctement. Voir la console JavaScript pour les détails techniques.

je ne sais pas pourquoi 

Erreur de l'API: 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>

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

Consultez le didacticiel de l'API Google Maps: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map

En lisant attentivement, vous verrez qu'une clé, YOUR_API_KEY, est nécessaire.

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

Pour obtenir votre clé, allez ici: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key

6
AD.

J'ai eu le même problème en essayant d'utiliser l'API Google Maps. Vous avez le même message pour aller regarder dans la console JavaScript. Quelle perte de temps!

Dans mon cas, le problème était que j'avais mal entré le nom de domaine (le référant) lors de l'obtention de la clé d'API du navigateur auprès de Google.

La correction du nom du domaine de référence ( http://phystutor.com/ *) sur le site API de Google a résolu le problème pour moi. 

4
PhysTutor

J'ai eu le même problème lors de la mise en ligne d'un site sur un nouvel hôte avec une page contenant une carte intégrée qui n'était pas sur le site auparavant. La carte avait fonctionné sur mon site de développement, ce fut donc une surprise pour moi aussi. 

Si vous êtes arrivé sur cette page en effectuant une recherche Google, vous voudrez commencer ici: https://developers.google.com/maps/documentation/javascript/get-api-key .

Si vous souhaitez lire l'annonce relative à la configuration requise de la clé d'API, lisez ceci: https://googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html

Notez également que dans mon cas, "&callback=initMap" a provoqué une erreur.

1
Webdrips

Remplacez votre plugin googleApi maps par ceci ...

" 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>

J'espère que ça marche pour toi.

1
Nandam Mahesh

Vous pouvez consulter la documentation de Google Maps pour différents codes d'erreur ici: https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

Le code d'erreur ci-dessus est décrit dans la documentation comme suit:

L’URL en cours de chargement de l’API JavaScript de Google Maps n’a pas été ajouté à la liste des référents autorisés. S'il vous plaît vérifier le référent paramètres de votre clé API sur la console Google API.

Veuillez vérifier le lien vers la documentation sur les cartes pour les messages d'erreur pour plus de détails.

Google Maps nécessite désormais l'utilisation d'une clé API Google Maps pour afficher une carte sur votre site, conformément à cet article: https://googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates- to-google.html.

0
dwerty