Как сделать полупрозрачный Google Map

180

07 сентября 2018, 11:40

Вот страница с картой
http://denispostolenko.com/test/contacts.html
Карта сейчас в стандартном стиле. Как сделать ее такой как на картинке?
Думаю она должна быть прозрачной немного или должна быть полупрозрачная подложка

Answer 1

Попробуйте этот стиль добавить в конец файла /test/style.css

.gm-style > div > div {
    background: rgba(255,255,255,.5);
}

Answer 2

Вы можете полностью заменить цветовую гамму карты по вашему желанию. Можете воспользоваться любым конструктором стилей (например вот этим) для гугл карт или выбрать из готовых примеров подобное.

Вот пример стилевого решения с приглушенными цветами:

[
    {
        "featureType": "poi",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "stylers": [
            {
                "saturation": -70
            },
            {
                "lightness": 37
            },
            {
                "gamma": 1.15
            }
        ]
    },
    {
        "elementType": "labels",
        "stylers": [
            {
                "gamma": 0.26
            },
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "stylers": [
            {
                "lightness": 0
            },
            {
                "saturation": 0
            },
            {
                "hue": "#ffffff"
            },
            {
                "gamma": 0
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [
            {
                "lightness": 50
            },
            {
                "saturation": 0
            },
            {
                "hue": "#ffffff"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": -50
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "labels.text",
        "stylers": [
            {
                "lightness": 20
            }
        ]
    }
]