Google Maps JS APi v3 fusion table 层在 Chrome 中不工作

Question

我通过融合 table 图层功能设置了一个带有国家叠加层的 google 地图。

在这里完美运行：http://codepen.io/anon/pen/ZYLPNO

function loadMap() {
   var script = document.createElement('script');
   script.type = 'text/javascript';
   //script.src = 'http://maps.googleapis.com/maps/api/js?v=3.exp&key=' + settings.api_key + '&' + 'callback=initMap';
     script.src = 'http://maps.googleapis.com/maps/api/js?v=3.exp' + '&' + 'callback=initMap';
   document.body.appendChild(script);
  }

initMap = function() {
   var google = window.google || {};

    var c_map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: new google.maps.LatLng(30,0),
     zoom: 2,
     disableDefaultUI: true,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var world_geometry = new google.maps.FusionTablesLayer({
     query: {
      select: 'geometry',
      from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
      where: "Name IN ('Russia','France')"
     },
     styles: [{
      where: "Name = 'France'",
      markerOptions: {
      iconName: 'red_circle'
     },
      polygonOptions: {
       fillColor: '#EB6841',
       fillOpacity: 0.3
      }
     }, {
      where: "Name = 'Russia'",
      polygonOptions: {
       fillColor: '#00A0B0',
       fillOpacity: 0.5
      }
     }],
     map: c_map,
     suppressInfoWindows: true
    });

    google.maps.event.addListener(world_geometry, 'click', function(e) {
     document.location.href = document.location.protocol + '//' + document.location.host + '/countries/' + e.row.Name.value.toLowerCase();
    });
   };
loadMap();

#map-canvas, html, body {
  height: 200px;
  width: 300px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  z-index: 2;
  box-sizing: border-box;
  word-wrap: break-word;
  font-size: 20px;
font-style: normal;
font-weight: normal;
height: 300px;
line-height: 30px;
  box-shadow: 0px 3px 5px 0 #333
}

<div id="map-canvas"></div>

但嵌入我网站的相同代码在 Firefox（windows、mac、android）、Safari（iOS、Mac ), IE11 (Windows) 但不适用于 Chrome (Mac, Windows, Android).

没有 javascript 错误，地图只是显示而没有覆盖。我什至试图删除我页面上除此之外的所有 js。我还完全按照我网站上的样式复制了样式（如您在 codepen 中所见）。

很遗憾，我无法为您提供 link 我的网站，它目前托管在我的笔记本电脑上。

有什么调试方法吗？

Answer 1

这是一个 CSS 问题，由这条规则强制执行（在 style.cab.css 中）：

img{max-width:100%;}

添加这条规则：

 #map-canvas img{max-width:none;}

Google Maps JS APi v3 fusion table 层在 Chrome 中不工作

Google Maps JS APi v3 fusion table layer is not working in Chrome

javascript

google-chrome

google-maps-api-3