Google Maps in eine Webseite einbinden
Google Maps in eine Webseite einbinden
Google Maps Beispiel 1
Die Karte wird um einen Marker zentriert, dessen Position wird hierbei nur über Straße, Ort und das Land definiert.
t<script src="http://maps.google.com/maps?file=api&v=2&key=[hier API-key eingeben]"
type="text/javascript"> </script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(51.512001,7.462206), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
geocoder = new GClientGeocoder();
}
}
function showAddress() {
var address = 'Brückstraße 21 , Dortmund, DE';
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
}
else {
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
);
}
//]]>
</script>
<body onload="initialize(); showAddress();" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
Fehlerbehebung bei Google Maps auf Ihrer Website
In diesem Artikel beschreiben wir einen Typischen Fehler beim Laden von Google Maps Karten und bieten einen Lösungsweg.
Sie sehen anstelle der Karte den Hinweis "Google Maps wurde auf der Seite nicht richtig geladen"? Dies hat meist einen recht simplen Grund, denn seit dem 22.06.2016 benötigt man einen API-Schlüssel um den Kartendienst Google Maps auf der eigenen Website zu verwenden. Die betrifft vorerst zwar nur Webseiten die bis zum 22.06.2016 noch keine Google Karte verwendet haben, aber auch nach einem Update des verwendeten Scripts kann einen API-Schlüssel erforderlich machen.
Einen API-Schlüssel zu erhalten ist nicht besonders schwer und Google hat eine entsprechende Plattform eingerichtet über die Sie die kostenlosen Schlüssel einfach erstellen und verwalten können.
Was besagt die Fehlermeldung denn aber nun genau?
Grundlegend kann diese Fehlermeldung mehrere Ursachen haben also lassen Sie uns erst einmal genau herausfinden wo der Fehler liegt. Für die Fehleranalyse müssen Sie sich ein wenig mit Ihrem Browser und der entsprechenden Entwicklungsumgebung auskennen, denn zur Anzeige der eigentlichen Fehlermeldung benötigt man eine JavaScript-Konsole.
Hoppla! Etwas ist schief gelaufen. Auf dieser Seite wurde Google Maps nicht richtig geladen. Sehen Sie sich die JavaScript-Konsole für technische Details an.
Wie Sie die JavaScript-Konsole in Ihrem Browser öffnen können finden Sie auf Stackoverflow gut beschrieben, oder Sie kontaktieren Ihren Webmaster oder auch uns um den Fehler beheben zu lassen.
Google Maps Console Fehler
Die vier folgenden Fehlermeldungen sind die häufigsten Meldungen die uns in der Jahrelangen Tätigkeit über den Weg gelaufen sind und wahrscheinlich wird auch Ihr Problem eines der vier sein:
- MissingKeyMapError - Der API-Schlüssel fehlt
- RefererNotAllowedMapError – Der API-Schlüssel ist für diese URL nicht erlaubt
- ApiNotActivatedMapError – Der API-Schlüssel ist nicht aktiviert
- InvalidKeyMapError - Die verwendete API-Schlüssel ist falsch
Wie Fixt man MissingKeyMapError
Dieser Fehler besagt das Sie noch keinen API-Schlüssel verwenden und der Schlüssel nachgetragen werden muss.
Erstellen Sie eine Google Maps-API-Key
Führen Sie die folgenden Schritte zum Erstellen und eines kostenlosen Google Maps API Key durch.
- Besuchen Sie folgenden Seite: https://developers.google.com/maps/documentation/javascript/get-api-key
- Klicken Sie auf den Button "Schlüssel anfordern", ab hier müssen Sie sich mit ihrem vorhandenen Google Konto anmelden.
- Als nächstes werden Sie gebeten ein neues Projekt anzulegen, das Projekt stellt in der API Konsole Ihre Website dar und kann alle API Schlüssel die Sie für Ihre Website benötigen aufnehmen.
Google Maps API registrieren
In diesem Schritt erstellen wir nun den eigentlichen API-Schlüssel:
- Der Vorgegebene Name kann natürlich angepasst werden
- Und Sie müssen auf "HTTP-Verweis-URLs (Websites)" klicken.
- In dem Anfragen von diesem http… tragen Sie die beiden folgenden Optionen ein:
yourname.com/*
* .yourname.com / * - Als letztes klicken Sie noch unten auf den Button erstellen.
- Nach dem Klick auf den Button erscheint ein PopUp-Fenster aus dem Sie den Schlüssel kopieren können.
Hinweis: Google sagt, dass es bis zu 5 Minuten dauern kann bis ein neuer API-Schlüssel aktiv wird. In Ausnahmefällen hat die Aktivierung aber schon bis zu 30 Minuten gedauert.
Den Fehler RefererNotAllowedMapError Fixen
Der Fehler RefererNotAllowedMapError kommt auch sehr häufig vor und besagt "nur" das der Schlüssel nicht für Ihre Website freigegeben ist.
- Öffnen Sie die folgende Url: https://console.developers.google.com/apis/credentials
- Klicken Sie den Namen Ihres API-Schlüssels um die Einstellungen zu bearbeiten.
- Sehen Sie nach ob bei der Schlüsseleinschränkung "HTTP-Verweis-URLs (Websites)" gewählt ist und im Feld "Anfragen von diesem http…" die Optionen
yourname.com/*
* .yourname.com / *
eingetragen sind. - Klicken Sie auf den Button "Speichern" um die neuen Einstellungen zu übernehmen.
Tipp: Wenn Sie mehrere Projekte erstellt haben stellen Sie sicher, dass Sie mit dem richtigen arbeiten. Oben links finden Sie ein Dropdownfeld um zwischen den einzelnen Projekten hin und her zu wechseln.
Wie "ApiNotActivatedMapError" fixen
Google Maps hat zurzeit 16 verschiedene APIs. Der Google Maps JavaScript-API ist dabei nur der beliebteste. Nun kann es vorkommen dass der Schlüssel welchen Sie verwenden einfach in Ihrem Konto noch nicht aktiviert wurde.
- Öffne Sie: https://console.developers.google.com/apis/library
- Unter "Google Maps API", klicken Sie auf "Mehr" um alle APIs zu sehen.
- Klicken Sie auf den Google Maps-APIs den Sie verwenden wollen
- Im nächsten Fenster sehen Sie direkt oben ob der Shlüssel aktiv ist und wenn nicht
- Klicken Sie einfach auf "Aktivieren"
Tipp: es kann einige Minuten dauern bis die Aktivierung wirklich durchgeführt wurde und der API-Schlüssel dann auch funktioniert.
Was ist "InvalidKeyMapError"?
InvalidKeyMapError bedeutet einfach das der angegeben Schlüssel nicht korrekt ist. In den allermeisten Fällen ist entweder noch ein veralteter Schlüssel im Script eingetragen oder beim Kopieren wurde nicht der gesamte Schlüssel kopiert und eingefügt.
- Gehen Sie auf: https://console.developers.google.com/apis/credentials
- Öffnen Sie das entsprechende Projekt und kopieren Sie den passenden Schlüssel einfach erneut.
- Tragen Sie den Schlüssel in Ihrem Script ein.
Comments
No Comments