Карта таблицы Fusion не отображается на мобильной версии веб-сайта

Это мой первый раз, используя Javascript, и я собрал код для отображения таблицы Google Fusion на веб-сайте.
Веб-сайт имеет мобильную версию, но карта не отображается, когда на мобильном устройстве (она отлично работает в веб-версии).
Я использовал услугу под названием Weebly, чтобы создать веб-сайт, и он создает для вас мобильную версию, подумал, что я не знаю, имеет ли это какое-либо отношение к проблеме.Карта таблицы Fusion не отображается на мобильной версии веб-сайта

Может ли кто-нибудь помочь мне изменить мой код, чтобы карта могла работать на мобильных устройствах?

Я довольно потерян здесь. Я знаю, что есть IsMobile линии, но я не знаю, как их правильно изменить.

Вот код:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport"></meta> 
<title>ProjectsR5(Revised) - Google Fusion Tables</title> 
<style type="text/css"> 
html, body, #googft-mapCanvas { 
} 
} 
#panel { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     margin-left: -180px; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     } 

</style> 

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

<script type="text/javascript"> 
function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     map.setZoom(11); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 
var geocoder; 
var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    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 viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=yes'); 
    } 
    var mapDiv = document.getElementById('googft-mapCanvas'); 
    mapDiv.style.width = isMobile ? '40%' : '950px'; 
    mapDiv.style.height = isMobile ? '40%' : '600px'; 
    map = new google.maps.Map(mapDiv, { 
     center: new google.maps.LatLng(37.57633626219805, -119.83481312667385), 
     zoom: 7, 
     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')); 

    layer = new google.maps.FusionTablesLayer({ 
     map: map, 
     heatmap: { enabled: false }, 
     query: { 
     select: "col5", 
     from: "1KbXpf6FSzsFQt3rIpVP5ruIR_Pij87dgy2HwjyLi", 
     where: "" 
     }, 
     options: { 
     styleId: 2, 
     templateId: 2 
     } 
    }); 

    if (isMobile) { 
     var legend = document.getElementById('googft-legend'); 
     var legendOpenButton = document.getElementById('googft-legend-open'); 
     var legendCloseButton = document.getElementById('googft-legend-close'); 
     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> 
</head> 

<body> 
    <div id="panel"> 
     <input id="address" type="textbox" value="Your Project Location"> 
     <input type="button" value="Search" onclick="codeAddress()"> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 

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

источник

2014-12-20 CEDRIC

в <body/> должен иметь высоту, заданную CSS, в противном случае браузер не сможет вычислить 40% для высоты карты в этой строке :

mapDiv.style.height = isMobile ? '40%' : '600px';

источник

2014-12-20 21:58:37

Карта таблицы Fusion не отображается на мобильной версии веб-сайта

ответ

Смежные вопросы