Google Fusion桌面地图嵌入式在iPad上不能正常工作

Question

我正在使用从Google Fusion桌面嵌入的地图，该桌面似乎在桌面上工作正常，但不会在iPad上显示。

我不确定如何修复iPad，因此我一直在使用Chrome扩展“User Agent Switcher”并在开发人员工具中使用设备模式。当我这样做，我得到的控制台错误：

“遗漏的类型错误：无法读取属性‘风格’空的”

有谁知道是什么原因造成的？

Codepen这里：http://codepen.io/anon/pen/KzVLvR

<meta name="viewport"></meta> 

<notextile><style type="text/css"> 
#googft-mapCanvas { 
    height: 500px; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
</style></notextile> 

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3"></script> 

<script type="text/javascript"> 
    function initialize() { 
    google.maps.visualRefresh = true; 
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
     (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
    if (isMobile) { 
     var metaTag=document.createElement('meta'); 
metaTag.name = "viewport" 
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 
document.getElementsByTagName('head')[0].appendChild(metaTag); 
    } 
    var mapDiv = document.getElementById('googft-mapCanvas'); 
    mapDiv.style.width = isMobile ? '100%' : '100%'; 
    mapDiv.style.height = isMobile ? '100%' : '500px'; 
    var map = new google.maps.Map(mapDiv, { 
     center: new google.maps.LatLng(50.86921697720649, 0.18021480234369847), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

      var myLatLng = {lat: 50.878353, lng: 0.063805}; 

    var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: 'Glyndebourne', 
    icon: 'http://res.cloudinary.com/glyndebourne/image/upload/v1456245664/gicon_afipi7.png' 
    }); 

    layer = new google.maps.FusionTablesLayer({ 
     map: map, 
     heatmap: { enabled: false }, 
     query: { 
     select: "col4", 
     from: "1_wBUixHJqO_W95zMHk_eP8wQKBuXvHEfvNgfTBSC", 
     where: "" 
     }, 
     options: { 
     styleId: 4, 
     templateId: 4 
     } 


    }); 

    if (isMobile) { 
     var legend = document.getElementById('googft-legend'); 
     var legendOpenButton = document.getElementById('googft-legend-open'); 
     var legendCloseButton = document.getElementById('googft-legend-close'); 

// CONSOLE ERROR REFERS TO THIS NEXT LINE: 
     legend.style.display = 'none'; 

     legendOpenButton.style.display = 'block'; 
     legendCloseButton.style.display = 'block'; 
     legendOpenButton.onclick = function() { 
     legend.style.display = 'block'; 
     legendOpenButton.style.display = 'none'; 
     } 
     legendCloseButton.onclick = function() { 
     legend.style.display = 'none'; 
     legendOpenButton.style.display = 'block'; 
     } 
    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<div id="googft-mapCanvas"></div> 

Answer 1

Athough它不相关的问题，请删除这部分完全：

if (isMobile) { 
     var legend = document.getElementById('googft-legend'); 
     var legendOpenButton = document.getElementById('googft-legend-open'); 
     var legendCloseButton = document.getElementById('googft-legend-close'); 

// CONSOLE ERROR REFERS TO THIS NEXT LINE: 
     legend.style.display = 'none'; 

     legendOpenButton.style.display = 'block'; 
     legendCloseButton.style.display = 'block'; 
     legendOpenButton.onclick = function() { 
     legend.style.display = 'block'; 
     legendOpenButton.style.display = 'none'; 
     } 
     legendCloseButton.onclick = function() { 
     legend.style.display = 'none'; 
     legendOpenButton.style.display = 'block'; 
     } 
    } 

的问题是这样的：

mapDiv.style.width = isMobile ? '100%' : '100%'; 
mapDiv.style.height = isMobile ? '100%' : '500px'; 

在移动设备脚本会将mapDiv的宽度和高度设置为100％。 设置百分比值要求这些值（宽度/高度）也设置为父节点（主体）....但它们未设置，因此可能无法计算mapDiv的宽度和高度。

修正：的htmlbody和设置宽度/高度到100%

/**CSS**/ 
html,body{ 
    height:100%; 
    width:100%; 
}