Code einbinden

Binden Sie den JavaScript-Code von Google-Maps am Ende der Seite ein. Auch für mehrere Karten genügt es, den Code nur einmal einzubinden:

 <script async src="//maps.googleapis.com/maps/api/js?key=[IhrKey]&libraries=places&sensor=false&callback=LoadMap"></script>

Dann müssen Sie auf der Seite einen Bereich festlegen, wo die Karte erscheinen soll. Dies geschieht z.B. mittels eines DIVs:

<div id="karte" style="width:100%; height:400px"></div>

Der Inhalt des DIVs wird - sofern der Browser des Benutzers, der die Seite besucht, zur Darstellung der Karte in der Lage ist - durch die Karte ersetzt. Hier könnte man also z.B. den Benutzer darauf hinweisen, dass der Browser nicht unterstützt wird. Die Karte wird auch nicht dargestellt, wenn der Benutzer Javascript deaktiviert hat.

Nun fügen Sie folgenden Code in Ihrer Seite ein. Diese Funktion wird aufgerufen, sobald das JacaScript von Google Maps geladen wurde:

<script type="text/javascript">
function LoadMap()
{	var map = new google.maps.Map(document.getElementById('karte'),
	{	center: new google.maps.LatLng(52.5162731, 13.3777642),
		zoom: 16,
		mapTypeId: google.maps.MapTypeId.HYBRID,
		scaleControl: true,
		overviewMapControl: true,
		overviewMapControlOptions:{opened:true},
	});
}
</script>

Das Ergebnis sieht dann so aus:


Wie man nun bestimmte Ziele aussucht, erfahren Sie auf der nächsten Seite.