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.

  • Sie brauchen zwingend ein Google-Konto
  • Melden Sie sich damit an
  • Gehen Sie auf code.google.come
  • Klicken Sie auf „Create project…“
  • Lesen und akzeptieren Sie die „Google Api Terms of Services“
  • Schalten Sie die Google Maps JavaScript API v3 ein
Google Maps API
  • Lesen und akzeptieren Sie die „Google APIs Terms of Service“ und die „Google Maps/Earth APIs Terms of Service“
  • Klicken Sie auf den Link „Google Maps JavaScript API v3“ und sie kommen auf eine Seite auf der Sie weitere Hinweise finden. Sie können die Seite auch direkt aufrufen unter developers.google.com
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.

  • Adresse in Google Maps suchen
Google Maps API
  • URL in Zwischenablage kopieren
  • Zwischenablage z.B. in Notepad kopieren
  • Breiten- und Längengrade der URL entnehmen
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

 

Das könnte dich auch interessieren:

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.