谷歌地图随机垂直线在Chrome中

Sg1*_*456 17 google-maps-api-3

我正在我的网站上实现谷歌地图,我刚开始注意到这条线出现了.它只发生在Chrome(Windows)中,无论我退回到我的代码中多远,我都无法让它消失.缩小时,该线随机渲染视口中的其他位置,通常位于右侧.

关于可能导致这种情况的任何想法?

在地图上的线 在地图上的线

这是我应用于map_canvas的CSS:

  #map_canvas img {
      max-width: none!important;
   }
   #map_canvas {
      height: 100%;
      width: 100%;
      position: absolute;
   }
   /** Make the map responsive to the container **/
   .map-container {
      height: 0;
      position: relative;
      padding-bottom: 80%;
      margin-right: -3%; /*compensation for margin0 on span9*/

   }
Run Code Online (Sandbox Code Playgroud)

这是地图画布项的基本HTML结构.

  <div class="span9">
     <div class="map-container"> <!-- container needed for responsiveness -->
        <div id="map_canvas"></div>
        <div class="hidden-phone">
           <ul>
              <li onclick="toggle()">Restrooms</li>
              <li onclick="toggle()">Handicap Access</li>
           </ul>
        </div>        
     </div>
  </div>
Run Code Online (Sandbox Code Playgroud)

小智 14

我在chrome上有同样的问题,我切换到版本3.14,这解决了问题,如果你包括像这样的谷歌脚本它应该解决问题

<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>
Run Code Online (Sandbox Code Playgroud)