Home » Webdesign » Google Maps via API auf die eigene Homepage einbinden
- Anzeige -
Software Asset Management beim Fachmann

Google Maps via API auf die eigene Homepage einbinden

Papier ist geduldig, Webseiten sind es auch. Darf man nun über die einfache "Einbetten"-Funktion Google Maps auf kommerzielle Webseiten einbinden oder nicht? Die einen sagen Ja, die anderen Nein. Also schauen wir uns in diesem Artikel an, wie das Einbinden mit Hilfe der API geht. Diese wird ab einer 25'000 Zugriffen pro Tag kostenpflichtig, das dürfte aber die Wegbeschreibung auf einer geschäftlichen Seite schwerlich erreichen.

Google Maps Api-Key besorgen(?)

Auch hier macht es uns Google nicht wirklich einfach: API v2 gibt es schon lange nicht mehr, API v3 braucht keinen Key, aber man soll sich doch einen anfordern (developers.google.com). Das beste ist, viele Links auf der Google Maps API Seite laufen ins Leere. Also weitersuchen.

Google Maps API
Google Maps API

Und hier wird es ganz dubios: Nirgendwo taucht hier noch wie früher ein API-Key auf. Die Beispiele unter "Codebeispiele" haben nichts dergleichen.

Google Maps API

Auf dieser Seite finden wir auch den wichtigen Hinweis: "Das Google Maps JavaScript API Version 3 ist ein kostenloser Dienst und für alle Websites verfügbar, die für Besucher kostenlos sind. Weitere Informationen finden Sie in den Nutzungsbedingungen".

Google Maps API

Erste Code-Gehversuche mit der Google Maps API

Mit Hilfe der Code-Beispiele kann man sich dann an die ersten Gehversuche machen.

Ich will die Position des Berges Titlis in der Schweiz anzeigen.

Meine HTML-Seite sieht hierzu so aus:

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;

function initialize() {
var myLatlng = new google.maps.LatLng(46.7720995,8.43778);
var mapOptions = {
zoom: 10,
center: myLatlng
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Titlis (Engelberg)'
});


}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


</head>
<body>
<div style="width:500px;height:380px;" id="map-canvas"></div>
</body>
</html>

Das Ergebnis kann sich einigermassen sehen lassen:

Google Maps API

Was passiert im Code?

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Diese Zeile ruft die Maps Funktionsbibliothek auf.

Die wichtigen Dinge passieren in der Funktion "initalize".

var myLatlng = new google.maps.LatLng(46.7720995,8.43778);

Hier wird die anzuzeigende Postion definiert. Sie ist in Breiten- und Längengraden definiert.

Wie erhalte ich in Google Maps die anzuzeigende Position in Breiten- und Längengraden?

Um die Breiten- und Längengrade des Berges Titlis (oder jeder beliebig anderen Adresse) zu erhalten, bedient man sich am einfachsten Google Maps.

Google Maps API
Google Maps API
var mapOptions = { 
zoom: 10,
center: myLatlng
};

Hier wird definiert, dass die initalie Zoom-Stufe 10 beträgt und das auf die Position des Titlis zentriert wird.

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

Hier wird definiert, dass die Karte im DIV mit der ID "map-canvas" angezeigt wird.

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Titlis (Engelberg)'
});

Hier wird der rote Marker auf den Titilis gesetzt. "Title" ist der Text, der beim Darüberfahren mit der Maus erscheint (Tool-Tip).

Anzeigen einer Route mit der Google Maps API auf der eigenen Homepage

Das obige Beispiel kann relativ leicht aufgebohrt werden um eine Route anzeigen zu können. Die Route selbst muss im Google-Earth Format (KML oder KMZ) vorliegen und auf den Webserver geladen werden. Falls die Route nicht im passenden Format vorliert, kann man diese mit diversen Tools oder z.B. auf der Homepage GPSies konvertieren lassen.

Um nun eine Route anzigen zu lassen, braucht es nur die zusätzlichen Zeilen

var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.it-zeugs.de/docs/test.kmz'
});
ctaLayer.setMap(map);

So sieht das komplette Beispiel aus:

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;

function initialize() {
var myLatlng = new google.maps.LatLng(47.3856,8.17452);
var mapOptions = {
zoom: 9,
center: myLatlng
};

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

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Titlis (Engelberg)'
});

var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.it-zeugs.de/docs/test.kmz'
});
ctaLayer.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


</head>
<body>
<div style="width:500px;height:380px;" id="map-canvas"></div>
</body>
</html>

Und die Seite selbst:

Google Maps API


War der Artikel hilfreich? Bitte liken und sharen. Danke!

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.
 


Posts: 1
Comment
Google is not defined
Reply #2 on : Wed October 01, 2014, 00:18:15
Hallo

Den Fehler kenne ich nicht, leider fehlt mir die Zeit für individuelle Problemlösungen. Schon mal gegoogelt. Das ist eventuell vielversprechend: http://stackoverflow.com/questions/20358431/uncaught-referenceerror-google-is-not-defined-index21-initialize-google-ma
Klaus Brokmann
Posts: 1
Comment
Re: Google Maps via API auf die eigene Homepage einbinden
Reply #1 on : Tue September 30, 2014, 16:00:05
Hallo,

ich versuche mich schon seit geraumer Zeit an dem Zugriff auf die API. Auch mit Ihrem Code, der oben unter "Erste Code-Gehversuche mit der Google Maps API" steht, bekomme ich keinen Zugriff!
Als Fehlermeldung bekomme ich stets "ReferenceError: google is not defined" (zumeinst mit Hinweis auf die Zeile "var myLatlng = new google.maps.LatLng(46.7720995,8.43778)")!

Scheinbar schlägt das Runterladen der API hier fehl, oder?
Haben Sie eine Idee, woran das liegen könnte?

Danke und Gruß
Klaus