Gmap3 ist ein jQuery Plugin mit dem sich einfach Google Maps erstellen lassen. Beispiele dafür gibt es auf der Seite genug. Es gibt auch ein Beispiel für eine gestylte Map, aber da wird der Kartenstil umgestellt und ich wollte nur eine Karte mit einem voreinstellten Stil. Für Google Maps gibt es so viele Einstellungen bzgl. Styling, Google stellt bereits einen Wizard zur Verfügung, mit dem man die Kartenstile ausprobieren kann. Noch einfach ist es mit Snazzy Maps. Es ist ein Repository für bereits erstellte Google Map Styles. Selbst wenn nichts genau den eigenen Geschmack trifft, dann kann man einen fertigen Stil nehmen und nur etwas anpassen.
Wie bringt man beides unter einen Hut? Was macht man mit dem Schnipsel, den man bei Snazzy Maps zu jeder Karte findet? Und so einfach ist es, wenn man es weiß:
$("#gmap").gmap3({ marker: { values: locations, }, map: { options: { // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":40}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-10},{"lightness":30}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":10}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":60}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]}], }, }, maxZoom: 10, autofit: {} });
Links:
Gmap3 – http://gmap3.net/
Snazzy Maps – http://snazzymaps.com/
Neueste Kommentare