Black & White Cincinnati Map
HTML
<title>Complex styled maps</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var cincinnati = new google.maps.LatLng(39.10005, -84.51000);
function initialize() {
var roadAtlasStyles = [
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "saturation": -400 },
{ "lightness": -8 },
{ "gamma": 6.18 }
]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "gamma": 1 },
{ "lightness": -24 }
]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "transit",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "saturation": 400 }
]
}, {
"featureType": "road",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "landscape",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "poi",
"stylers": [
{ "saturation": -100 }
]
}, {
}
]
var mapOptions = {
zoom: 12,
center: cincinnati,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
};
var...
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}