Styling Google Maps
<script>
var position = new google.maps.LatLng(52.626609, 1.300181);
var myOptions = {
zoom: 12,
center: position,
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var styles = [
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ color: '#4AA8F0' }
]
},
{
featureType: 'landscape.natural',
elementType: 'all',
stylers: [
{ color: '#ffffff' }
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#cccccc' }
]
}
];
var map = new google.maps.Map(
document.getElementById("map"),
myOptions);
map.setOptions({styles: styles});
</script>