Custom Google Map (swnext.co)

by Paulo Ávila

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=es"></script>
<div id="map"></div>

CSS

#map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

JavaScript

// http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

mapStyleOptions = [
    {
        featureType: 'administrative',
        elementType: 'all',
        stylers: [
            {
                visibility: 'off'
            }
        ]
    }, {
        featureType: 'poi',
        elementType: 'all',
        stylers: [
            {
                visibility: 'off'
            }
        ]
    }, {
        featureType: 'road',
        elementType: 'all',
        stylers: [
            {
                visibility: 'off'
            }
        ]
    }, {
        featureType: 'transit',
        elementType: 'all',
        stylers: [
            {
                visibility: 'off'
            }
        ]
    }, {
        featureType: 'landscape',
        elementType: 'all',
        stylers: [
            {
                hue: '#727D82'
            }, {
                lightness: -30
            }, {
                saturation: -80
            }
        ]
    }, {
        featureType: 'water',
        elementType: 'all',
        stylers: [
            {
                visibility: 'simplified'
            }, {
                hue: '#F3F4F4'
            }, {
                lightness: 80
            }, {
                saturation: -80
            }
        ]
    }
];

window.addEventListener('load', function(){
	var map = new google.maps.Map(document.getElementById('map'),{
		zoom : 3,
		center : new google.maps.LatLng(41.3857, 2.1699),
		panControl: false,
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL,
			position: google.maps.ControlPosition.TOP_LEFT
		},
		mapTypeControl: false,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		scaleControl: false,
		streetViewControl: true,
		overviewMapControl: false,
		mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'customMapStyles']
		//mapTypeId : google.maps.MapTypeId.ROADMAP,
		//mapTypeId :...