如何在Google Maps中使用指定mapId并优先代码自定义地图样式

当你为Google Maps实例指定mapId后，Google Maps Platform控制台中该mapId对应的预设样式会优先生效，导致代码里定义的styles被覆盖。以下是两种可行的解决方法：

方法一：初始化后立即强制设置自定义样式 #

在创建地图实例后，立刻调用setOptions方法重新设置样式，确保覆盖控制台的预设样式：

// 初始化地图
map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    center: latlng_2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapId: "123456",
    styles: defstyle
});

// 强制覆盖控制台样式
map.setOptions({ styles: defstyle });

方法二：在地图加载完成后设置样式 #

利用地图的idle事件（当地图加载完成并处于空闲状态时触发），此时再设置自定义样式，确保覆盖控制台样式：

map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    center: latlng_2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapId: "123456"
});

// 地图加载完成后设置自定义样式
google.maps.event.addListener(map, 'idle', function() {
    map.setOptions({ styles: defstyle });
    // 若只需触发一次，可添加该行移除监听
    // google.maps.event.removeListener(this);
});

补充：POI切换功能无需修改 #

你现有POI切换按钮的逻辑可以正常使用，因为map.setOptions方法会直接覆盖当前所有样式（包括控制台的mapId样式）：

document.getElementById("hide-poi").addEventListener("click", () => {
    $("#hide-poi").hide();  
    $("#show-poi").show(); 
    localStorage.setItem('hide_show_poi',0); 
    map.setOptions({ styles: styles["hidepoi"] });
});
document.getElementById("show-poi").addEventListener("click", () => {
    $("#show-poi").hide();  
    $("#hide-poi").show();
    localStorage.setItem('hide_show_poi',1);   
    map.setOptions({ styles: styles["showpoi"] });
});

内容的提问来源于stack exchange，提问作者Andrew Zheludkov