Javascript Google Fusion表映射导出静态HTML_Javascript_Html_Google Maps_Google Maps Api 3_Google Fusion Tables

Javascript Google Fusion表映射导出静态HTML

javascript html google-maps google-maps-api-3

Javascript Google Fusion表映射导出静态HTML,javascript,html,google-maps,google-maps-api-3,google-fusion-tables,Javascript,Html,Google Maps,Google Maps Api 3,Google Fusion Tables,我对Google Fusion Tables地图有点困惑。我将基础表与公共互联网共享。然后我点击共享并复制了原始HTML。我做了一些更新来添加一个图例。当我点击笔记本电脑上的HTML文件时，它在我的浏览器中完全可以看到。然而，在我的Android手机上，当我打开HTML时，当我试图移动地图时，它就会崩溃；此外，它在Android手机上被放大了。我需要把它放在某个地方让别人看吗？还是向他们发送一个原始HTML文件，并使底层的Fusion表可共享，足以让任何人点击HTML并查看交互式地图？移动浏览

我对Google Fusion Tables地图有点困惑。我将基础表与公共互联网共享。然后我点击共享并复制了原始HTML。我做了一些更新来添加一个图例。当我点击笔记本电脑上的HTML文件时，它在我的浏览器中完全可以看到。然而，在我的Android手机上，当我打开HTML时，当我试图移动地图时，它就会崩溃；此外，它在Android手机上被放大了。我需要把它放在某个地方让别人看吗？还是向他们发送一个原始HTML文件，并使底层的Fusion表可共享，足以让任何人点击HTML并查看交互式地图？移动浏览器需要做哪些调整？谢谢，这是我的密码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>IDOT Crash Data--Park Ridge</title>

<link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3"></script>

<style type="text/css">
      html, body, #googft-mapCanvas{
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }
      #map {
        height: 100%;
        width: 100%;
      }
      #legend {
        background: #FFF;
        padding: 10px;
        margin: 5px;
        font-size: 12px;
        font-family: Arial, sans-serif;
      }
      .color {
        border: 1px solid;
        height: 12px;
        width: 12px;
        margin-right: 3px;
        float: left;
      }
      .green {
        background: #6F0;
      }

      .blue {
        background: #06C;
      }

</style>

<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 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 ? '100%' : '1200px';
    mapDiv.style.height = isMobile ? '100%' : '700px';
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(42.01756197213789, -87.83972673890003),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var bikeLayer = new google.maps.BicyclingLayer();
        bikeLayer.setMap(map);

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


// Create the legend and display on the map
var legend = document.createElement('div');
        legend.id = 'legend';
        var content = [];
        content.push('<h3>Type Of Accident</h3>');
        content.push('<p><div class="color green"></div>Pedestrian</p>');
        content.push('<p><div class="color blue"></div>Pedalcyclist</p>');
        legend.innerHTML = content.join('');
        legend.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
      }



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

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