Google Maps selbst erstellen und einbetten

Google Maps selbst erstellen und einbetten

Google Maps selbst erstellen und einbetten

Vielleicht sind sie euch schon einmal aufgefallen. Google Maps die in einer Webseite eingebettet sind, aber nicht ganz so wie die Standard Karten aussehen. Im folgenden Tutorial sehen wir uns Schritt für Schritt an, wie man eine Karte farblich anpasst, einen eigenen Pin verwendet und den Infotext verändert, den man beim anklicken sieht. Und dabei bleibt die Google Karte trotzdem noch voll funktionsfähig.

Als erstes brauchen wir eine neue Javascript Datei. Der Code kann auch einfach in eine bestehende eingebaut werden. Zwecks Übersichtlichkeit lagere ich sowas aber gerne aus.

function initialize() {
    var myLatlng = new google.maps.LatLng(48.252974, 16.369582);
    var mapOptions = {
        center:myLatlng,
        zoom:16,
        disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
    map.set('styles', [ { "stylers": [ { "saturation": -100 } ] } ]);
    var marker = new google.maps.Marker();
    marker.setPosition(myLatlng);
    marker.setMap(map);
    marker.setIcon('../img/map_pin.png');

    var contentString = '<div id="content"><p><b>Überschrift</b><br />Hier steht Text<br /><a href="#" target="_blank">Routenplaner</a></p></div>'
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

Dann sehen wir uns das ganze einmal an. In der ersten Zeile haben wir die Position auf der Karte, auf der später unser Pin auftauchen soll eingegeben. Um Längen- und Breitengrad einer Adresse herauszufinden benutze ich den Online-Dienst Latitude Longitude Finder.

Danach generieren wir auch schon die Karte. Selbsterklärend, center gibt den Mittelpunkt der Karte an, zoom die Zoomstufe. 16 oder 17 sind hier gute Werte, aber da könnt ihr euch natürlich spielen und einen für euch passenden Wert finden.

Mit disableDefaultUI schalten wir das Standard Design ab, was uns ermöglicht, unsere eigenen Styles zu verwenden. Dazu aber gleich mehr.

mapTypeId lädt noch die Standard Straßenkarte. Und damit sind die Optionen auch schon abgeschlossen.

Nun definieren wir mit map die Karte, und teilen ihr mit, dass es auf unserer Seite ein Element mit der ID „googlemap“ gibt. Dort wird die Karte dann später angezeigt werden.

Farbanpassungen leicht gemacht

Jetzt kommen wir endlich zu den Anpassungen. Mit map.set legen wir unsere optischen Anpassungen fest. In diesem Fall stellen wir die Karte auf Schwarz/Weiß. Wer gerne mehr ändern will kann sich mit dem Map Style Generator spielen und per „show JSON“ die passendend Stylings auslesen.

Danach kümmern wir uns um den Pin. Der heißt in der Maps API marker, wird auf den Mittelpunkt gesetzt (setPosition), dann auf die Karte (setMap) und zuletzt mit einem Icon ausgestattet (setIcon).

Was wir noch brauchen, ist ein Text oder Link, sobald man auf den Pin klickt. Und das regelt man über das InfoWindow. Hier kann man über den contentString beliebigen Inhalt anzeigen.

Einbinden nicht vergessen

Zu guter letzt fehlen nur noch ein paar Kleinigkeiten. Als erstes natürlich die Einbindung der MapsAPI und unseres Skripts in den head:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../js/googlemaps.js"></script>

Und dann natürlich auch noch ein Element im Inhalt. Dort wird dann die Karte erscheinen.

<div id="googlemap">MAP</div>

Wichtig ist, dass man dem Element eine Höhe per CSS zuweißt. Ansonsten bleibt der Block 0px hoch und erscheint nicht.

Wenn wir alles richtig gemacht haben, sollte das Ergebnis aber ca so aussehen:

Google Maps

12 thoughts on “Google Maps selbst erstellen und einbetten

  1. Daniel

    Hallo! Hat sich an dem Script etwas geändert? Ich bekomme im Frontend die Meldung, „Hoppla – Ein Fehler ist aufgetreten.
    Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details dazu entnimmst du der JavaScript-Konsole.“ Muss ich jetzt etwas anderes machen?

Schreibe einen Kommentar zu Kathi Antworten abbrechen

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