Google Maps API – Design der Karte individuell anpassen

Das Google Maps Karten Design anpassen gehört zu jeder guten Kür dazu, wenn es heißt eine individuelle Webseite zu erstellen und gestalten, die sich möglichst in vielen Punkten von der Konkurrenz abhebt. Dazu zählt auch die individuelle Gestaltung der Google Maps – Weg vom öden & bekannten Look and Feel – Hin zum einzigartigen Hingucker.

Individuelles Google Map Design – So funktioniert’s

Es gibt zahlreiche Webseiten im Internet, die einem dabei helfen ein individuelles Design für die Google Map zu erstellen und Ihr werdet sicherlich sehr schnell feststellen, dass die farblichen Einstellungen sehr umfangreich sind. Es kann also auch ein bisschen dauern, bis das eigene Google Maps Layout steht und gefällt.

Eine Seite, die mir sehr gut gefällt um meine Google Maps anzupassen ist diese hier. Hier habt Ihr viele Einstellungsmöglichkeiten und könnt Eure Google Map nach Herzenslust gestalten.

Nachdem Ihr euer Google Maps angepasst habt könnt Ihr den Json-Code in Eure App oder in Euren Webseiten Code eingeben. Ich speicher meine individuellen Google Maps Sytels in einer globalen Variable ab, damit ich bei einer Änderung nur eine Stelle bearbeiten muss und nicht mehrere.

$mapStyles	=	'
	[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8ec3b9"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1a3646"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#64779e"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#334e87"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6f9ba5"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3C7680"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#304a7d"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2c6675"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#255763"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#b0d5ce"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3a4762"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#0e1626"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e6d70"
      }
    ]
  }
]';

Anschließend rufe ich die Styles nur noch ab und die Google Maps erstrahlt im eigenen Design.

function initMap() {
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
	var map		=	new google.maps.Map(document.getElementById('map'), {
		zoom		:	4,
		center		:	myLatLng,
		styles		:	
	});
}

Hinweis: Entfernt einfach die Striche an der Stelle wo die styles abgerufen werden!

oliver

2 Kommentare

Schreibe ein Kommentar zu Google Maps API – Design der Karte individuell anpassen

  1. avatar marcusdunst@me.commarcusdunst@me.com sagt:

    Hallo Oli, tolle Erklärungen für die API.
    Ich habe auch schon individualisierte Karten erstellen können inkl. eigener Grafik als Marker und Adressbox.
    Bsp: https://www.cinque.de/stores/stores/cinque-store-berlin

    Eine Frage habe ich für die ich bisher nirgends eine Lösung gefunden habe.
    Ist es möglich in der Karte links oben anstatt der Kartenauswahl (Karte, Satellit) das Feld mit Adresse, Routenplaner und Bewertungen anzuzeigen oder gibt es das nur bei der iFrame Version?
    Bsp –> https://nineteen87.de/de/

    Vielleicht hast du darauf ja eine Antwort.
    Lg Marcus

    • avatar adminadmin sagt:

      Hi Marcus,

      du kannst die Kartenansichten via API deaktivieren und ein Div über die Karte packen. Eine andere Möglichkeit fällt mir aktuell auch nicht ein. Hoffe konnte dir damit helfen.

      Lg Oli

Hinterlasse ein Kommentar zum Beitrag "Google Maps API – Design der Karte individuell anpassen"

Deine E-Mail-Adresse wird nicht veröffentlicht.

Letzte Aktualisierung am 23.09.2020 / Affiliate Links / Bilder von der Amazon Product Advertising API

Follow Me

doch mal auf Instagram