Google Maps (JS API V3): Personalisierte Karte einbinden

Es gehört schon beinahe zum heutigen Standard personalisierte Google Maps Karten bei den jeweiligen Kontaktsektionen der Pagebetreiber einzubinden. Schliesslich soll die Karte an das restliche Design der Seite angepasst sein und der Marker, der den genauen Standort auf der Karte markiert, soll das Firmenlogo beinhalten. Nur wie kriegt man dies nun bei der eigenen Webseite hin?

Dazu wird ein neues JS-File (gmap.js) erstellt oder der Code wird in ein bereits vorhandenes Javascriptfile implementiert. Falls ein neues File erstellt wird sollte dabei nicht vergessen werden dies auch im Header der Seite aufzurufen. In das File wird nun folgender Code eingesetzt:

function initialize() {
  var myLatlng = new google.maps.LatLng(xx.xxxx,x.xxxxx); /*x in den Klammern ersetzen durch die genauen Koordinaten Eures Standortes*/
  var mapOptions = {
    zoom: 15, /*hier wird der Zoom der Karte definiert*/
    center: myLatlng, /*hier wird definiert, dass die oben angegebenen Koordinaten auf der Karte zentriert werden*/ 
    panControl: false, /*Schwenkregler aktivieren (true) oder deaktivieren (false)*/
    zoomControl: true, /*Zoomregler (+/-) aktivieren oder deaktivieren*/
    mapTypeControl: true, /*Umschaltung des Kartentyps erlauben oder nicht erlauben*/
    mapTypeId: google.maps.MapTypeId.ROADMAP, /*Definition Kartentyp z.B. auch SATELLITE möglich*/
    styles: [ { "featureType": "water", "elementType": "geometry", "stylers": [ { "hue": "#009877" }, { "saturation": "100" }, { "lightness": "-61" }, { "visibility": "on" } ] }] /*hier kann der Style der Karte (Farben der Strassenelemente) definiert werden*/
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Street 2001, 6120 City', /*hier Anzeigetitel des Markers definieren z.B. Adresse*/
      icon: '../img/mymarker.png' /*hier Pfad zum personalisierten Marker angeben*/
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Die vorbereitete Karte wird nun durch folgendes Div auf der Webseite eingebunden:

<div id="map"></div>

Damit die Controlpanels auf der Karte nun nicht ‚verzerrt‘ dargestellt werden, muss das CSS-File der Webseite noch mit folgenden Zeilen ergänzt werden:

#map img {
	max-width: none;
}

Wie komme ich an die Koordinaten meines Standortes?

Gib die gewünschte Adresse bei der Suche von Google Maps ein. Bei der Suche nach z.B. Bahhof Luzern hat sich der Link der Seite von www.google.ch/maps nun folgendermassen verändert https://www.google.ch/maps/search/bahnhof+luzern/@47.0489115,8.3100975,17z/data=!3m1!4b1. Die beiden Zahlen nach dem @-Zeichen (47.0489115,8.3100975) definieren dabei die Koordinaten der Angegebenen Adresse.

Wie erstelle ich Styles für meine Google Maps Karte?

Es gibt mehrere Webseiten, welche eine einfache Erstellung für Mapstyles ermöglichen. Eine davon ist z.B. diese. Einfach die gewünschten Styles definieren, auf den Button ‚Show JSON‘ klicken, Code kopieren und bei ’styles:‘ in unserem ‚gmap.js‘ File einfügen.

Nützliche Links zum Thema

Auf der Developer Seite von Google sind die einzelnen verfügbaren Styles und Controlpanels für die personalisierung der Google Maps Karte ausführlicher beschrieben.

About This Author

Grüezi! My name is Angela. I'm projectleader of the swissbased webagency Tree Stones, i love fantasybooks and you could say i'm in a unhealty realtionship with coffe from Starbucks.

Post A Reply

*