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.
Keine Produkte gefunden.
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.
Keine Produkte gefunden.
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!
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.
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?
Vielleicht hast du darauf ja eine Antwort.
Lg Marcus
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