Сложность изменения стиля карты Google при нажатии кнопки

Question

Итак, у меня есть карта, использующая API Google Map, и я пытаюсь изменить цвет воды одним нажатием кнопки. Я уже давно борюсь с этим.

Я инициализировал переменную map вне функции initMap, но, похоже, это ничего не изменило.

    var map;
    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {

            center: {              
                lat: 40.674,
                lng: -73.945               
            },
            zoom: 12,
            styles: [
                {
                    featureType: 'water',
                    elementType: 'geology',
                    stylers: [{color: '#17263c'}]
            }
            ]               
        });         
    }

    function showTest() {

        var myStyle =[{
            featureType: 'water',
            elementType: 'geometry',
            stylers: [
                { color: '#fc0101' }
            ]
        }];

    map.setOptions({styles: myStyle});
    }

Answer 1

Даже если вы инициализировали переменную карты вне своей функции initMap, тот факт, что вы затем объявляете переменную карты внутри этой функции с префиксом var, делает ее локальной только для этой функции.

Измените это на:

 function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {