Untitled

<!DOCTYPE html>
<html>
<head>
<title>Simple styled maps</title>
<style>
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

    var featureOpts = [
        {
            stylers: [
                { hue: '#f2842b' },
                { visibility: 'simplified' },
                { gamma: 0.8 },
                { weight: 0.8 }
            ]
        },

        {
            elementType: 'labels',
            stylers: [
                {
                    visibility: 'on',
                    color: '#686868'
                }
            ]
        },

        {
            featureType: 'water',
            stylers: [
                {
                    color: '#5eb9ff',
                    gamma: 0.3, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 65, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 10
                }
            ]
        },

        {
            featureType: 'road', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#ffffff', // kolor
                    gamma: 0.8, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 10 //pixels
                }
            ],
            elementType: 'labels.text',         //tutaj zaczyna się konfiguracji nazwy ulic
            stylers: [
                {
                    visibility: 'on',
                    color: "#000000"
                }
            ]
        },

        {
            featureType: 'administrative.land_parcel', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#4a4a4a', // kolor
                    gamma: 0.8, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 10 //pixels
                }
            ]
        },

        {
            featureType: 'administrative.locality', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#1484d8', // kolor
                    gamma: 0.8, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ]
        },

        {
            featureType: 'landscape', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#f0ede5', // kolor
                    gamma: 0.8, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ]
        },

        {
            featureType: 'landscape.man_made', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#dfdbd4', // kolor
                    gamma: 0.8, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ]
        },

        {
            featureType: 'poi', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#b3dd9b', // kolor
                    gamma: 0.1, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ]
        },

        {
            featureType: 'poi.attraction', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#d2e4c8', // kolor
                    gamma: 0.1, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ]
        },
        {
            featureType: 'poi.park', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#d2e4c8', // kolor
                    gamma: 0.1, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ],
            elementType: 'labels',
            stylers: [
                {
                    color: '#686868'
                }
            ]
        },


        {
            featureType: 'transit.line', //tutaj wrzucasz typ
            stylers: [
                {
                    color: '#ffba7e', // kolor
                    gamma: 0.1, // gamma
                    hue: '#FF0000', // odcień
                    lightness: 80, //jasność, (-100,100)
                    saturation: 30, // saturacja (-100, 100)
                    weight: 3 //pixels
                }
            ]
        }

    ]
    var mapOptions = {
        zoom: 12,
        center: brooklyn,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

    var styledMapOptions = {
        name: 'Custom Style'
    };

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas" style="width: 1022px; height: 330px;"></div>
</body>
</html>