如何让 "Hide/Show" 和 "add marker" 函数在 Google 映射中协同工作？

Question

我正在尝试为我的家谱网站创建一个页面，其中包含一个 google 地图，其中有两个添加项：(i) 添加标记以显示与家庭相关的地点，以及 (ii) "hide/show" Google 的兴趣点标记。通过复制和粘贴，我成功地使用一个组合脚本编写了一个 HTML 页面，该脚本在打开时仅显示 "add marker" 元素。如果我删除代码的 "add marker" 部分，我只会得到 "Hide/Show" 元素（如您所料）。他们永远不会同时出现在同一张地图上！我强烈怀疑这与我复制了 "function initMap" 和 "var map" 命令有关，但如果我删除其中一对命令，我只会得到一个空白页。我最近几天一直在搜索 google 地图 API 和互联网，但通常都没有成功，这让我发疯。你们中的任何好人都可以分享您的知识并告诉我哪里出错了吗？您可能猜到了，这是我第一次尝试 Javascript！！这个问题现在已经解决，工作代码现在显示在这里：-

        <script>  
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7, center: { lat: 52.85, lng: 1.16 },
        });

        var styleControl = document.getElementById('style-selector-control');            map.controls[google.maps.ControlPosition.TOP_CENTER].push(styleControl);

        document.getElementById('hide-poi').addEventListener('click', function () {
            map.setOptions({ styles: styles['hide'] });
        });
        document.getElementById('show-poi').addEventListener('click', function () {
            map.setOptions({ styles: styles['default'] });
        });

        var styles = {
        default: null,
        hide: [
          {
            featureType: 'poi',
            stylers: [{visibility: 'off'}]
          },

          {
            featureType: 'transit',
            elementType: 'labels.icon',
            stylers: [{visibility: 'off'}]
          }
        ]
      }

        var marker = new google.maps.Marker({
        position: {lat:52.05,lng:1.16},
        map: map,
        title: 'Hello World!'
        });
        }

</script>

Answer 1

只需在第一个 mapInit() 内添加标记，去掉第二个：

function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: 53.82, lng: -4.74 },
            });

            var styleControl = document.getElementById('style-selector-control');
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(styleControl);

            document.getElementById('hide-poi').addEventListener('click', function () {
                map.setOptions({ styles: styles['hide'] });
            });
            document.getElementById('show-poi').addEventListener('click', function () {
                map.setOptions({ styles: styles['default'] });
            });
            var marker = new google.maps.Marker({
                position: { lat: 53.82, lng: -4.74 },
                map: map,
                title: 'Hello World!'
            });
        }

如何让 "Hide/Show" 和 "add marker" 函数在 Google 映射中协同工作？

How do I get "Hide/Show" and "add marker" functions to work together in Google maps?

javascript

google-maps-api-3