Google Maps: Individuelle Karten für die eigene Website

01.02.2015 3.567 Aufrufe Web & Co 5,00

Google Maps ist ein Dienst von Google, der leistungsstarke und nutzerfreundliche Kartentechnologie und Informationen zu Unternehmen wie Standorte, Kontaktinformationen und Routenplaner bietet.
Für Webdeveloper wird eine gut dokumentierte API (Application Programming Interface) zur Verfügung gestellt und daher kann man das umfangreiche Kartenmaterial auch in eigene Webprojekte integrieren – maßgeschneidert für die jeweilige Anforderung.
Voraussetzung dafür ist ein Google API-Key, der als Zugangsschlüssel zu den Daten fungiert.

Um eigene Punkte in die Karte eintragen zu können, müssen die Geodaten in einem bestimmten Format (Latitude, Longitude) vorliegen – diese Daten erhält man beispielsweise bei LatLong.net.

Folgender Code-Schnipsel würde zum Beispiel meinen Geburtsort, St. Johann in Tirol, an der Stelle <div id="map"></div> im Markup darstellen und zentrieren:

var point = new google.maps.LatLng(47.522368, 12.426555); var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: point }); new google.maps.Marker({ map: map, position: point, title: "St. Johann in Tirol" });
Code-Sprache: JavaScript (javascript)

St. Johann in Tirol als Mittelpunkt der Welt

Folgendes Beispiel zeigt eine erweiterte Anwendung von Google Maps: Die Standard-Bedienelemente wurden entfernt und als Marker wurde mein Logo verwendet. Jeder Klick auf die Karte erhöht den Zoomlevel um einen Grad.

Beitrag bewerten

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Sternen nach 4 Bewertungen.

Beitrag kommentieren

Du hast Anmerkungen zum Beitrag?
In den Kommentaren ist der optimale Platz dafür!

Kommentar verfassen

Kommentar verfassen