谷歌地图 JS 嵌入不起作用答案

【问题标题】：Google Maps JS Embed Doesn't Work谷歌地图 JS 嵌入不起作用
【发布时间】：2018-05-09 23:51:55
【问题描述】：

我已经建立了一个带有一些嵌入式地图和自定义标记的快速网站。它在 Chrome 中的 PC 桌面上运行良好，在我的 Google Pixel 上运行良好，但是当我在我的 Mac 上的 Safari/iPhone 上检查它时，它不会显示或渲染地图（在 Chrome 中运行）。

以下是代码示例：

<div id="oakville-map" class="row map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>

<script>
    //Maps          
    var iconBase = '/pathtomarker/markers/red_circle_';
    var icons = {
        one: {
            icon: iconBase + '1.png'
        },
        two: {
            icon: iconBase + '2.png'
        },
        three: {
            icon: iconBase + '3.png'
        },
        four: {
            icon: iconBase + '4.png'
        },
        five: {
            icon: iconBase + '5.png'
        },
        six: {
            icon: iconBase + '6.png'
        }
    };

    var element =  document.getElementById('oakville-map');
    if (typeof(element) != 'undefined' && element != null)
    {
        //Oakville Map
        function initMap() {
            var tmhOakville = {lat: 43.5113563, lng: -79.6873432};
            var Oakvillemap = new google.maps.Map(document.getElementById('oakville-map'), {
              zoom: 13,
              center: tmhOakville
            });
            var features = [
                {
                    position: tmhOakville,
                    type: 'one'
                }
            ];
             // Create markers.
            features.forEach(function(feature) {
              var marker = new google.maps.Marker({
                position: feature.position,
                icon: icons[feature.type].icon,
                map: Oakvillemap
              });
            });
        }
    }
</script>

对于某些页面上的各种地图，我还有一些 if 块，但它们的语法都是相同的。不涉及地理编码，只需使用自定义标记进行简单嵌入。

任何人都可以看到为什么这不会在 safari/iOS 中加载的原因吗？谢谢

【问题讨论】：

请注意您使用的是 array.forEach，它是 ECMAScript 5。而且相对较新。可能会导致一些兼容性问题。但是当说“休息”时——这到底是什么意思？你检查了开发者控制台吗？
@barryhunter by break 我的意思是它没有在容器上渲染甚至运行 JS，但我已经解决了我的问题。每个 if 语句都会覆盖 initMap 函数，因此只会加载最后一个映射。不知道为什么它没有在铬中破裂，但哦，好吧。谢谢！

标签： ios google-maps-api-3 safari

【解决方案1】：

问题是每个 if 语句都覆盖了 initMap 函数，因此只有最后一个地图会加载。仍然不确定为什么它会在 Chrome 中正常呈现，但在 Safari/iOS 中却不行，该函数只会使用最后一个 if 语句呈现。

【讨论】：