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%; 
}