Change the default Google Map colours with custom styles

 
 
 

Last year I wrote an article about how to change the default Google Map colours using CSS filters, it was very basic and unsupported in some browsers but at the time it was the best you could do. Google have now introduced version 3 of the Google Maps API which finally gives you control of each element, it allows you to define the exact colours, hue, saturation and much more.

Although it is slightly harder to get started compared to the embedded iframe, I would advise this method over CSS filters.

Getting Started

In this article I’ll show a very basic map with custom styles, check out the Google Maps API, in particular the styling section for more details on advanced customisation. Firstly you'll need to get the Latitude and Longitude of the location that you want the map to centre on. The easiest way to get this to grab it from a lookup tool like latlong.net.

Once you have your Longitude and Latitude we can create our map by accessing the API, just use the code below and insert your longitude and latitude:


<!-- This is the element that will contain our Google Map. -->
<!-- This will grab the service from Google --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', init); function init() { var mapOptions = { // Zoom level (always required) zoom: 11, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(**your_latitude**, **your_longitude**), // Custom styles styles: [] }; var mapElement = document.getElementById('map'); var map = new google.maps.Map(mapElement, mapOptions); } </script>

This snippet will look for when the page loads and build a map based on your options inside the div with the map ID. You can add a CSS style to the div with your required height and width.

You'll notice the link to http://maps.googleapis.com which actually grabs the service from Google, if you are planning to exceed their usage limits you should really obtain an API key and append that to the end of the link otherwise you could breach Google's terms and conditions. The limit is currently 25,000 map loads per day so you should be safe for development.

Get Styling

Inside the mapOptions object you'll find a property called styles. Guess what, thats where you are going to add your custom styles, you can select each of the map ‘featureTypes' such as roads, water, landscape and apply ’stylers’ to them which could be a hex color, lightness, hue or more. A full list of map features and stylers can be found in the Map Documentation. Here a couple of custom maps and the styles to get you started:




 styles: [
    {
        "featureType": "water",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#acbcc9"
            }
        ]
    },
    {
        "featureType": "landscape",
        "stylers": [
            {
                "color": "#f2e5d4"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#c5c6c6"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#e4d7c6"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#fbfaf7"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#c5dac6"
            }
        ]
    },
    {
        "featureType": "administrative",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": 33
            }
        ]
    },
    {
        "featureType": "road"
    },
    {
        "featureType": "poi.park",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": 20
            }
        ]
    },
    {},
    {
        "featureType": "road",
        "stylers": [
            {
                "lightness": 20
            }
        ]
    }
]




 styles: [
    {
        "featureType": "landscape",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 65
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 51
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 30
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.local",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 40
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -100
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "hue": "#ffff00"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -97
            }
        ]
    }
]




 styles: [
    {
        "featureType": "administrative",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "water",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "landscape",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.local",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "water",
        "stylers": [
            {
                "color": "#84afa3"
            },
            {
                "lightness": 52
            }
        ]
    },
    {
        "stylers": [
            {
                "saturation": -17
            },
            {
                "gamma": 0.36
            }
        ]
    },
    {
        "featureType": "transit.line",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#3f518c"
            }
        ]
    }
]

If you need more inspiration there are loads of examples of custom maps on snazzymaps.com