Javascript 点击按钮很难改变谷歌地图的风格

所以我有一张使用谷歌地图api的地图，我正试图通过点击按钮来改变水的颜色。 我已经为这件事挣扎了一段时间了

我在initMap函数之外初始化了map变量，但这似乎没有改变任何事情

    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});
    }

---

即使您在initMap函数外部初始化了一个map变量，但是您随后在该函数内部声明了一个以

var

为前缀的map变量，这一事实使得该函数仅为该函数的局部变量

改为：

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

---

我的天啊，我想弄明白这件事已经很久了。我想总有一天，如果这有助于你解决问题，你会将其视为正确答案。