谷歌地图JS嵌入不起作用

时间:2017-11-26 17:44:10

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

我建立了一个包含一些嵌入式地图和自定义标记的快速网站。它可以在我的Chrome桌面上工作正常,可以很好地处理我的Google Pixel,但是当我在Safari / iPhone上的Mac上查看它时,它不会显示或渲染地图(在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>

如果某些页面上的各种地图的块有多个,但是所有这些的语法都相同。没有涉及地理编码,只需使用自定义标记进行简单嵌入。

任何人都可以看到为什么这不会在safari / iOS中加载?感谢

1 个答案:

答案 0 :(得分:0)

问题是每个if语句都覆盖了initMap函数,因此只加载最后一个映射。仍然不确定为什么它会在Chrome中呈现良好但在Safari / iOS中没有呈现,该功能只会使用最后一个if语句呈现。