webentwicklung-frage-antwort-db.com.de

Google Maps v3 api für localhost funktioniert nicht

Ich wollte ein Demo-Beispiel für die Implementierung von Gmaps v3 ausprobieren und habe dieses Beispiel aus der Dokumentation von Google ausprobiert. Es ist jedoch keine Ausgabe vorhanden. Die Seite wird nur einige Sekunden lang geladen und dann leer, keine Ausgabe.

<!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>
41
Neville

Zunächst einmal: Google Maps 3 benötigt keinen API-Schlüssel mehr

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

als URL.

(Jeff Hoye wies darauf hin, dass ab dem 22. Juni 2016 erneut ein API-Schlüssel erforderlich ist.)

Und dann hast du das "Neue" in dieser Zeile vergessen:

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

Mit diesen Änderungen wird Ihre Karte angezeigt.

80
Joachim Rohde

Ohne einen API-Schlüssel funktioniert Google Maps jetzt nicht ... Referenz: https://console.cloud.google.com/apis

7
Ravi Ji

es ist sehr leicht! Geben Sie im neuen API-Code Ihre Referrer ein. Also für deinen localhost Test:

LASS ES LEER

hier ist auch die Google API Erklärung:

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

Wenn Sie dieses Feld leer lassen, werden Anfragen von jedem Überweiser akzeptiert.
Stellen Sie sicher, dass Sie Referrer hinzufügen, bevor Sie diesen Schlüssel in der Produktion verwenden.

0
Ebrahim