Google Maps Flat UI
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<div id="map"></div>
CSS
#map {
height: 300px;
width: 100%;
}
JavaScript
jQuery(document).ready(function () {
var map;
var centerPosition = new google.maps.LatLng(-18.8386082, -41.9108836);
var style = [{
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "on"
}, {
"color": "red"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#f3f4f4"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#7fc8ed"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#83cead"
}]
}, {
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"weight": 0.9
}, {
"visibility": "on"
}]
}, {
featureType: "poi",
elementType: "labels",
stylers: [ { visibility: "off" } ]
}]
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
map.setOptions({
styles: style
});
...