Blue water

Xavier on November 5, 2013
Share this on: Twitter Facebook
A simple map with blue water and roads/landscape in grayscale.

Javascript style array

[
	{
		featureType: 'water',
		stylers: [{color:'#46bcec'},{visibility:'on'}]
	},{
		featureType: 'landscape',
		stylers: [{color:'#f2f2f2'}]
	},{
		featureType: 'road',
		stylers: [{saturation: -100},{lightness: 45}]
	},{
		featureType: 'road.highway',
		stylers: [{visibility: 'simplified'}]
	},{
		featureType: 'road.arterial',
		elementType: 'labels.icon',
		stylers: [{visibility: 'off'}]
	},{
		featureType: 'administrative',
		elementType: 'labels.text.fill',
		stylers: [{color: '#444444'}]
	},{
		featureType: 'transit',
		stylers: [{visibility: 'off'}]
	},{
		featureType: 'poi',
		stylers: [{visibility: 'off'}]
	}
]

Create a map

var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(53.385873, -1.471471),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: style_array_from_above_here
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);
        

Need a bit more help?

Download a simple example