{"id":17210,"date":"2013-05-13T18:01:40","date_gmt":"2013-05-13T10:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17210"},"modified":"2025-04-24T17:14:06","modified_gmt":"2025-04-24T09:14:06","slug":"google-maps-styles","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/google-maps-styles\/","title":{"rendered":"How to Style Google Maps"},"content":{"rendered":"

Google Maps<\/a> is one of the best services you can get from Google<\/a>. It\u2019s a free tool that allows you to easily embed interactive and information-rich maps on your website. However, one disadvantage that comes from using free services is that eventually they all look the same.<\/p>\n

The good news is Google launched the API that controls the map styles<\/a>. So, in this post, we will see how to use the API and make your map more distinctive.<\/p>\n

\n View Demo<\/a>\n<\/div>\n

Google Maps Library<\/h2>\n

The first thing that we need to do is to include the Google Maps JavaScript library<\/a> inside the document\u2019s <head> tag, so that we can use the API.<\/p>\n

<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false\"><\/script><\/pre>\n
Google Maps Components<\/h2>\n
There are three components to style the Google Maps: the featureTypes<\/code>, the elementTypes<\/code>, and the Stylers<\/code>.<\/p>\n
featureTypes<\/code> is used to select the geographical objects on the map, such as the road, the water, and the parks<\/strong>, so it basically works like the CSS selectors. For your convenience, we have listed a few featureTypes that we can use to control the map.<\/p>\n\n\n\n\n\n\n\n\n\n\n
FeatureTypes<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
water<\/code><\/td>\nSelect all the water objects on the map including the sea, the lake and the river.<\/td>\n<\/tr>\n
road<\/code><\/td>\nSelect all the roads on the map.<\/td>\n<\/tr>\n
landscape<\/code><\/td>\nSelect the landscapes on the map.<\/td>\n<\/tr>\n
poi<\/code><\/td>\nSelect the point of interests, areas like schools, business districts, and parks.<\/td>\n<\/tr>\n
transit<\/code><\/td>\nSelect all the public transit like bus stations, the train stations and the airports.<\/td>\n<\/tr>\n
administrative<\/code><\/td>\nSelect the administrative areas.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
For more, you can head over to the following API reference: Google Maps feature type specification<\/a>.<\/p>\n
elementTypes<\/code> is used to target the element that is part of the geographical objects, such as the object shape, the fill, the stroke, and the object labels.<\/p>\n
stylers<\/code> is an array of properties to adjust the object colors and its visibility. Google Maps accepts HSL (Hue, Saturation, Lightness) and Hexadecimal for the color format.<\/p>\n
Basic Usage<\/h2>\n
First of all, we need to add a <div><\/code> element that is assigned with an id<\/code> to contain the map.<\/p>\n
<div id=\"surabaya\"><\/div><\/pre>\n
The styles in Google Maps are declared with JavaScript objects. So, all the styles are nested under the <script><\/code> tag \u2013 this is basic JavaScript. Additionally, you can place the scripts before the body close tag, or at the head tag with the window.onload<\/code> function, like so.<\/p>\n
window.onload = function () {\n    \/\/ add the scripts here\n}<\/pre>\n
Create a variable to contain the map style rules. In this case, I would like to name it styles<\/strong>.<\/p>\n
window.onload = function () {\n    var styles = [\n        \/\/ we will add the style rules here.\n    ];\n};<\/pre>\n
Then, display the map to the <div><\/code> container with the following functions.<\/p>\n
window.onload = function () {\n    var styles = [\n        \/\/ we will add the style rules here.\n    ];\n    var options = {\n        mapTypeControlOptions: {\n            mapTypeIds: ['Styled']\n        },\n        center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),\n        zoom: 16,\n        disableDefaultUI: true,\n        mapTypeId: 'Styled'\n    };\n    var div = document.getElementById('surabaya');\n    var map = new google.maps.Map(div, options);\n    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });\n    map.mapTypes.set('Styled', styledMapType);\n};<\/pre>\n
At this point, the map should have appeared on your page, as follows.<\/p>\n
\"Default<\/figure>\n<\/p>\n
Check out<\/strong>: Getting Started with Google Maps JavaScript API<\/a><\/p>\n
In this example, I would like to change the color of the water. To do so, we can write the style rules in this way, within the styles<\/code> variable.<\/p>\n
var styles = [\n    {\n        featureType: 'water',\n        elementType: 'geometry.fill',\n        stylers: [\n            { color: '#adc9b8' }\n        ]\n    }\n];<\/pre>\n
The code above changes the fill color of the water element on the map to color #adc9b8<\/code>, and here\u2019s how it turns out.<\/p>\n
\"Google<\/figure>\n<\/p>\n
Next, let\u2019s change the landscape\u2019s color, and this time we will use the HSL color format so that we can adjust the color lightness, like so.<\/p>\n
var styles = [\n    {\n        featureType: 'water',\n        elementType: 'geometry.fill',\n        stylers: [\n            { color: '#adc9b8' }\n        ]\n    },{\n        featureType: 'landscape.natural',\n        elementType: 'all',\n        stylers: [\n            { hue: '#809f80' },\n            { lightness: -35 }\n        ]\n    }\n];<\/pre>\n
This code addition gives us the following result.<\/p>\n
\"Google<\/figure>\n<\/p>\n
Furthermore, these are the style rules for several other objects on the map.<\/p>\n
{\n    featureType: 'poi',\n    elementType: 'geometry',\n    stylers: [\n        { hue: '#f9e0b7' },\n        { lightness: 30 }\n    ]\n},{\n    featureType: 'road',\n    elementType: 'geometry',\n    stylers: [\n        { hue: '#d5c18c' },\n        { lightness: 14 }\n    ]\n},{\n    featureType: 'road.local',\n    elementType: 'all',\n    stylers: [\n        { hue: '#ffd7a6' },\n        { saturation: 100 },\n        { lightness: -12 }\n    ]\n}<\/pre>\n
Here is the final look of the map.<\/p>\n
\"Final<\/figure>\n<\/p>\n
You can head over to the demo page to see the final result in detail.<\/p>\n
\n    View Demo<\/a>\n    Download Source<\/a>\n<\/div>\n
Google Maps Styling Tools<\/h2>\n
In addition, if you prefer working with a GUI rather than manually writing the script, here are the tools for you to try out.<\/p>\n