Question

我一直在尝试将地图（使用API的v3）填充到jQuery选项卡中。我不明白为什么我只看到左上方的地图的一个小方块，地图的其余部分是灰色的。这是我的代码

 <script type="text/javascript">
 var map;
var layer;
function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(9.35300524537724, -82.31857926757817),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'sex',
      from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y"

    },
    map: map

  });

}


function filterData {
var filter = [];
var stores = document.getElementsByName('store');

foe = stores[i]; i++) {
  if (store.checr (var i = 0, store; storked) {
    filter.push('\'' + store.value + '\''); 
 }
}

 if (filter.length) {
if (!layer.getMap()) {
  layer.setMap(map);

}
layer.setOptions({
  query: {
    select: 'sex',
    from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y",
     where: '\'sex\' IN (' + filter.join(',') + ')'
  }
});

} else {
  layer.setMap(null);
 }
}

</script>

<div id="tabs-5">

<div id="map_canvas"></div>


</div>
  $(document).ready(function() { initialize(); });

我在stackoverflow上看到了同样的问题并尝试从该答案中解决。但我的问题没有解决。请告诉我问题在哪里。

Answer 1

您可能想尝试将此元标记添加到您的网页：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

我感觉这是一个处理您的视口未正确设置的问题。以下是可能有助于解决此问题的问题的链接。 Viewport meta Tag

使用jquery ui选项卡时，Google地图无法正确显示

1 个答案: