Google Maps: Individuelle Karten für die eigene Website

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.