How to Style Google Maps

By . in Web Design. Updated on .

Google Maps is one of the best services you can get from Google. It’s 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.

The good news is Google launched the API that controls the map styles. So, in this post, we will see how to use the API, and make your map be more distinctive.

Google Maps Library

The first thing that we need to do is to include the Google Maps JavaScript library inside the document’s <head> tag, so that we can use the API.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Google Maps Components

There are three components to style the Google Maps: the feautureTypes, the elementTypes, and the Sytlers.

featureTypes is used to select the geographical objects on the map, such as the road, the water, and the parks, 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.

FeatureTypes Description
water Select all the water objects on the map including the sea, the lake and the river.
road Select all the roads on the map.
landscape Select the landscapes on the map.
poi Select the point of interests, areas like schools, business districts, and parks.
transit Select all the public transit like bus stations, the train stations and the airports.
administrative Select the administrative areas.

For more, you can head over to the following API reference: Google Maps feature type specification.

elementTypes 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.

stylers 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.

Basic Usage

First of all, we need to add a <div> element that is assigned with an id to contain the map.

<div id="surabaya"></div>

The styles in Google Maps are declared with JavaScript objects. So, all the styles are nested under the <script> tag – this is the JavaScript 101. Additionally, you can place the scripts before the body close tag, or at the head tag with the window.onload function, like so.

window.onload = function () {
	// add the scripts here
}

Create a variable to contain the map style rules. In this case, I would like to name it as styles.

window.onload = function () {
	var styles = [
		// we will add the style rules here.
	];
};

Then, display the map to the <div> container with the following functions.

window.onload = function () {
	var styles = [
		// we will add the style rules here.
	];
	var options = {
	mapTypeControlOptions: {
		mapTypeIds: ['Styled']
	},
		center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),
		zoom: 16,
		disableDefaultUI: true,	
		mapTypeId: 'Styled'
	};
	var div = document.getElementById('surabaya');
	var map = new google.maps.Map(div, options);
	var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
	map.mapTypes.set('Styled', styledMapType);
};

At this point, the map should have appeared on your page, as follows.

Check out: Getting Started with Google Maps JavaScript API

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 variable.

var styles = [
	{
		featureType: 'water',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#adc9b8' }
		]
	}
];

The code above changes the fill color of the water element on the map to color #adc9b8, and here how it turns out.

Next, let’s change the landscape’s color, and this time we will use the HSL color format so that we can adjust the color lightness, like so.

var styles = [
	{
		featureType: 'water',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#adc9b8' }
		]
	},{
		featureType: 'landscape.natural',
		elementType: 'all',
		stylers: [
			{ hue: '#809f80' },
			{ lightness: -35 }
		]
	}
];

This code addition gives us the following result.

Furthermore, these are the style rules for several other objects on the map.

{
	featureType: 'poi',
	elementType: 'geometry',
	stylers: [
		{ hue: '#f9e0b7' },
		{ lightness: 30 }
	]
},{
	featureType: 'road',
	elementType: 'geometry',
	stylers: [
		{ hue: '#d5c18c' },
		{ lightness: 14 }
	]
},{
	featureType: 'road.local',
	elementType: 'all',
	stylers: [
		{ hue: '#ffd7a6' },
		{ saturation: 100 },
		{ lightness: -12 }
	]
}

Here is how the final look of the map.

You can head over to the demo page to see the final result in detail.

Google Maps Styling Tools

In addition, if you prefer working GUI rather than manually writing the script, here are the tools for you to try out.

Further Resources

Further on implementing Google Maps API for map styling, you can head over to the following references.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail