web-dev-qa-db-fra.com

L'API Google Maps v3 pour localhost ne fonctionne pas

Je voulais essayer un exemple de démonstration d'implémentation de Gmaps v3 et essayer cet exemple tiré de la documentation de Google, mais il n'y a pas de sortie, la page se charge simplement pendant quelques secondes, puis vide, pas de sortie.

<!DOCTYPE html>
<html lang = "en">
<head>
    <style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0; padding: 0}
        #map-canvas{height: 100%}
    </style>
    <title>GMaps Demo</title>
    <script src = "https://maps.googleapis.com/maps/api/js?
                   key=${API_KEY}&sensor=false">
    </script>
    <script>
        function initialize(){
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = google.maps.Map(
                      document.getElementById("map-canvas"),
                      mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>
<body>
    <div id = "map-canvas">
    </div>
</body>
</html>
javascriptgoogle-mapsgoogle-maps-api-3
41
Neville

Tout d’abord: Google Maps 3 n’a plus besoin d’une clé d’appel.

https://maps.googleapis.com/maps/api/js?sensor=false

comme une URL.

(Comme Jeff Hoye l'a souligné, à compter du 22 juin 2016, une clé API est à nouveau requise.)

Et puis vous avez oublié le "nouveau" dans cette ligne:

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

Avec ces modifications, votre carte sera affichée.

80
Joachim Rohde

Sans clé API, Google Maps ne fonctionne pas ... référence: https://console.cloud.google.com/apis

7
Ravi Ji

c'est très facile! dans le nouveau code API, vous devez entrer vos référants. Donc, pour votre test localhost:

LAISSEZ VIDE

voici également l'explication de Google Api:

 Accept requests from these HTTP referrers (web sites) (Optional)
 Use asterisks for wildcards.

Si vous laissez ce champ vide, les demandes de n'importe quel parrain seront acceptées.
Assurez-vous d’ajouter des référents avant d’utiliser cette clé en production.

0
Ebrahim