2011

Google Maps mit mehr Style

(posted by admin, 1 Kommentar »)

Voraussetzung für das Styling der Karten ist die Verwendung der aktuellen Version des Google Maps Api (v3). Wir erstellen zunächst ein Div mit einer eindeutigen Id „map_canvas“, in dem die Google Map später platziert wird. Über CSS lassen sich Breite und Höhe der Karte bequem festlegen.

Einbinden von Google Maps

Für alle, die noch nicht mit der aktuellen Version des Apis gearbeitet haben, möchte ich zunächst einen kurzen Überblick geben, wie ihr die Karte in ein HTML Dokument einbindet.

1. Hinzufügen der Google Maps Bibliothek im Header der Seite.

<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>

Beachtet hierbei bitte, dass der Parameter „sensor“, der für das Übertragen der eigenen Position gedacht ist, am Ende der URL zwingend gesetzt werden muss. Da wir in unserem Beispiel den Standort nicht übermitteln möchten ist der Parameter auf „false“, andernfalls auf „true“ zu setzen.

2. Anlegen einer Javascript – Funktion initialize() zum Aufbau der Karte

<script type="text/javascript">

function initialize() {

/*Standard Setup der Google Map*/
	var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);

	var myOptions = {
        zoom: 13,
        center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
        };
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>

In einem weiteren Skriptbereich im Header legen wir eine Funktion an, die den Aufbau und das Verhalten der Karte bestimmt. Wir erzeugen hierzu zunächst ein neues google.maps.LatLng Objekt, das spätere das Zentrum unserer Karte sein wird.

var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);

Um an die Koordinaten eines Standortes zu gelangen, gibt es im Web zahlreiche Tools, sog. Geocoder. (z.B. http://www.cantamen.de/geocoder.php?lang=de)

Im nächsten Schritt gilt es nun, die Optionen der Karte näher zu bestimmen. Hierzu definieren wir ein Optionen-Array myOptions, in dem der Kartenzoom, die Centerposition und der Kartentyp festgelegt werden. Letzteren belassen wir für Testzwecke zunächst bei google.maps.MapTypeId.ROADMAP. Abschließend erzeugen wir ein Kartenobjekt und weißen diesem das Container-Div, sowie das Array mit den Optionen zu.

3. Aufruf der Initialisierungsfunktion beim Laden der Seite

Damit die Funktion beim Laden der Seite auch ausgeführt wird, muss diese mit einem onload Event verknüpft werden. In das body-Tag der Seite schreiben wir deshalb:

<body onload="initialize()">;

Habt ihr alle Code-Anweisung in das HTML-Dokument eingefügt, sollte die Karte nun korrekt angezeigt werden.

Styling von Google Maps

Kommen wir nun zum eigentlichen Styling der Google Map. Seit Version 3 des Api stehen Entwicklern hierzu zwei Möglichkeiten zur Verfügung:

Variante 1: Bearbeiten der Default-Einstellungen
Möchte man die Styles der Basiskartentypen TERRAIN, ROADMAP, SATELLITE, HYPRID verändern, ohne einen zusätzlichen Kartentyp in der Karte mit aufzunehmen, so ist diese Variante die richtig.

Variante 2: Hinzufügen eines neuen Kartentyps, StyledMapType
Soll es im Unterschied dazu bei der Karte möglich sein, zwischen den einzelnen Kartentypen ( TERRAIN, ROADMAP, SATELLITE, HYPRID) sowie den eigenen Typen zu wechseln, so ist Variante 2 das Mittel der Wahl.

Variante 1: Styling der Karte durch Bearbeiten der Default-Einstellungen

Werfen wir zunächst einen Blick auf die erste Variante. Hierfür benötigen wir zwei Dinge. Zum einen ein Style Array, das die Farben von Kartenbestandteilen (Straßen, Plätzen, Parks etc.) festlegt und zum anderen einen Befehl, um dieses Style Array der Karte zuzuordnen.

a, Festlegen der neuen Kartenstyles durch Style Array
Das Array besitzt im Allgemeinen folgenden Aufbau:

var dasStyleArray = [

{

featureType: '',

elementType: '',

stylers: [

{hue: ''},

{saturation: ''},

{lightness: ''},

// etc...

]

},

{

featureType: '',

elementType: '',

stylers: [

{hue: ''},

{saturation: ''},

{lightness: ''},

// etc...

]

},

... usw...

];

Es besteht aus einer Aneinanderreihung von Blöcken, die für die Farbgebung der einzelnen Kartenbestandteile, also Straßen, Landschaften, Wasser, öffentliche Einrichtungen etc., zuständig sind.
Jeder dieser Blöcke besteht wiederum aus drei Abschnitten:

featureType:
Der featureType bestimmt, auf welches Kartenelement sich die späteren Styling-Regeln beziehen sollen. Mögliche Werte sind etwa „administrative“, „landscape“, „water“, „road.highway“. Die komplette Auflistung findet ihr in der Api-Referenz.

elementType:
Der Element Typ gibt an, ob die späteren Styling-Regeln auf die Karte selbst (geometry), die Beschriftungen (labels) oder alles (all) angewendet werden sollen.

Styler:
Bei Farbedefinitionen wird immer auf das HSL-Modell zurückgegriffen. Durch Angabe von Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) oder durch gesonderte Funktionen, beispielsweise Umkehrung der Helligkeit, bekommt das Kartenelement im Styler somit den eigentlichen Anstrich verpasst. Einen Überblick über alle gültigen Anweisungen findet ihr im Api-Manual.

Tip: Wer auf lästiges Ausprobieren verzichten möchte, findet auf der folgenden Seite einen Styling-Wizard mit komfortabler Benutzeroberfläche, der den fertigen Code für das Style-Array liefert.

b, Zuordnen des neuerstellten Kartenstyles
Damit die definierten Kartenstile auch angezeigt werden, müssen sie der Karte noch zugeordnet werden. Hierfür kann man auf die Funktion setOptions() des erstellten Kartenobjektes wie folgt zurückgreifen:

map.setOptions({styles: dasStyleArray });

c, Beispiel
Ein erstes einfaches Beispiel soll das Styling der Karte Schritt für Schritt veranschaulichen:

Der komplette Code lautet somit:

 function initialize() {

/*Standard Setup der Google Map*/
	 var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);

	 var myOptions = {
      zoom: 13,
      center: latlng,
	 mapTypeId: google.maps.MapTypeId.ROADMAP
    };

	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	var blueMoon= [
  {
    featureType: "all",
    stylers: [
      { hue: '#0000b0'},
      {invert_lightness: 'true'},
    ]
  },

  {
    featureType: "landscape.man_made",
    stylers: [
	  { hue: '#fcff05'}
    ]
  }

];

 map.setOptions({styles: blueMoon});
}

Variante 2: Hinzufügen eines neuen Kartentyps

Das Festlegen des Stylings mit Hilfe des Style-Arrays ist gegenüber der ersten Variante absolut identisch. Um einen neuen, umschaltbaren Kartentyp hinzuzufügen, bedarf es allerdings ein paar zusätzlicher Anweisungen:

a, Hinzufügen der Kartentyp-Schaltflächen

var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'schalt_flaeche']

     }
 };

Zunächst fügen wir der Karte mit Hilfe des Options-Arrays die gewünschten Schaltflächen für die Standardtypen bzw. für unseren eigenen Kartentyp hinzu.

b, Anlegen eines neuen Kartentyps

var newMapType = new google.maps.StyledMapType(
blueMoon, {name: "Blue Moon"});

Im zweiten Schritt erstellen wir einen neuen Kartentyp. Der erste Parameter des Konstruktors erwartet dabei ein Style Array, das für das Erscheinungsbild der Karte zuständig ist. Der zweite Parameter „name“ legt den Namen des Kartentyps fest.

c, Zuordnung Schaltfläche Kartentyp

map.mapTypes.set('schalt_flaeche', newMapType);
map.setMapTypeId('schalt_flaeche');

Abschließend stellen wir die Beziehung zwischen der Schaltfläche und dem Kartentyp her und aktivieren den Kartentyp direkt nach dem Laden der Karte.

Das komplette Beispiel sieht dann wie folgt aus:

<script type="text/javascript">
function initialize() {

/*Standard Setup der Google Map + Hinzufügen der Schaltflächen*/

 var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);
 var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'schalt_flaeche']
      }
 };

 /*Eigenes Style-Array hinzufügen*/

 var blueMoon= [
  {
  featureType: "all",
  stylers: [
   {hue: '#0000b0'},
   {invert_lightness: 'true'},
    ]
  },

  {
    featureType:"landscape.man_made",
    stylers: [
     {hue: '#fcff05'},
    ]
  },

];

/*Erstellen eines neuen Kartentyps*/
var newMapType = new google.maps.StyledMapType(
blueMoon, {name: "Blue Moon"});

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

/*Zuordnung Schaltfläche <=> Kartentyp*/
 map.mapTypes.set('schalt_flaeche', newMapType);
 map.setMapTypeId('schalt_flaeche');
}

</script>

Beispiele, Code Snippets

1. Night hawk

2. Ohne Straßen

3. Graustufen

4. Modern

5. Gewerbe

6. Silent


/*1. Night hawk*/
var nighthawkStyle= [
   {
     featureType: 'all',
     stylers: [
         {invert_lightness: 'true'}
     ]
   },
];

/*2. Ohne Straßen */
var ohneStrassenStyle= [
   {
     featureType: 'road',
     stylers: [
       {visibility: 'off'}
     ]
   },
];

/*3. Graustufen*/
var graustufenStyle= [
   {
     featureType: 'all',
     stylers: [
       {saturation: -100},
       {gamma: 0.90}
      ]
   },
];

/*4. Modern */
var modernStyle= [
   {
     featureType: "water",
     stylers: [
      { hue: "#0066ff" },
      { lightness: -29 },
      { saturation: 7 }
    ]
  },

  {
    featureType: "landscape.natural",
    stylers: [
      { visibility: "on" },
      { saturation: 22 },
      { hue: "#00ff44" },
      { lightness: -42 }
    ]
  },

  {
    featureType: "road.highway",
    stylers: [
      { visibility: "simplified" },
      { hue: "#ff0000"},
      { saturation: -57 }
    ]
  },

  {
    featureType: "road.arterial",
    stylers: [
      { hue: "#ff0000"},
      { visibility: "simplified" },
      { saturation: -56 }
    ]
  },

  {
    featureType: "poi",
    stylers: [
      { visibility: "off" }
    ]
  },

  {
    featureType: "road.local",
    elementType: "geometry",
    stylers: [
      { visibility: "on" },
      { saturation: -59 },
      { hue: "#00ffdd" },
      { lightness: -18 }
    ]
  }
];

/*5. Gewerbe */
var gewerbeStyle= [
   {
     featureType: "road",
     stylers: [
      { visibility: "off"; }
     ]
   },

   { featureType: "poi.business",
     elementType: "geometry",
     stylers: [
       { hue: "#ff2b00" },
       { saturation: 63 },
       { lightness: -22 }
     ]
   }
];

/*6. Silent */
var silentStyle= [
   {
     featureType: 'road',
     elementType: 'geometry',
     stylers: [
       {'visibility': 'simplified'}
     ]
   },

   {
     featureType: 'road.arterial',
     stylers: [
       {hue: '#005eff'},
       {saturation: -78},
       {lightness: 0}
      ]
    },

    {
      featureType: 'road.highway',
      stylers: [
        {hue: '#ff0000'},
        {saturation: -40},
        {lightness: 2.8}
       ]
     },

     {
       featureType: 'water',
       stylers: [
         {hue: '#0077ff'},
	 {lightness: -22},
	 {saturation: -11},
        ]
      }, 

      {
        featureType: 'landscape',
        stylers: [
          {hue: '#0008ff'},
          {saturation: -26},
          {lightness: -1.1}
         ]
       },

       {
         featureType: 'poi',
         elementType: 'label',
          stylers: [
            {'visibility': 'off'}
          ]
        },

        {
          featureType: 'transit',
          stylers: [
            {'visibility': 'off'}
          ]
        },
];

Schlagwörter: Api, Codebeispiele, Google Maps, Javascript, Karten, Styling, Tutorial

Ein Kommentar

Moritz (5.02.2012)

Hallo,

gute Erklärung. Die Styles scheinen aber nur beim ROADMAP-Typ zu funktionieren? Ich würde gerne den TERRAIN-Type nutzen und alles im Grauton anzeigen lassen. Es funktioniert zwar halbwegs, jedoch werden einige Bereiche auf der Map noch farbig angezeigt. featureType und elementType habe ich auf “all” gesetzt.

Wie kann ich das Problem beheben?