Случайная вертикальная линия Google Maps в Chrome

Я использую google-карты на своем веб-сайте, и я просто начал замечать эту строку. Это происходит только в Chrome (Windows), и независимо от того, как далеко я отступаю в своем коде, я не могу заставить его исчезнуть. Когда вы уменьшаете масштаб, строка случайным образом отображается в другом месте в области просмотра, обычно с правой стороны.

Любые мысли о том, что может быть причиной этого?

Вот CSS, который я применил к map_canvas:

  #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*/

   }

И вот основная структура 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>

Ответ 1

У меня была такая же проблема на хроме, я переключился на версию 3.14, и это решило проблему если вы включили script для Google, как это, он должен решить проблему

<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>

Ответ 2

Это была проблема масштабирования для меня на хроме.

Вы можете проверить масштаб браузера? Это часто бывает проблемой, когда зум ставит плитки в нецелые пиксельные координаты. Вы можете reset увеличить, нажав ctrl-0.

Ответ 3

Эта проблема была подтверждена в GMAP-API_Issue V3 (здесь).

Хотя широко известно как проблема с белыми линиями, цвет этих ошибочных строк - это карта backgroundColor: выбрана на карте.

btargac работал у меня.

<script>src="http://maps.googleapis.com/maps/api/js?v=3.14&(KEY=****)&sensor=false"></script>

Спасибо

Ответ 4

Я также вижу эту проблему. Кажется, он появляется всякий раз, когда отображается вертикальная полоса прокрутки. Том выше ответ удаляет полосу прокрутки, но это может быть не приемлемым решением для большинства людей. Скорее всего, это ошибка Chrome. За последние месяцы они внесли большие изменения в полосы прокрутки, поэтому это не удивительно.

Ответ 5

Такая же проблема. Я пришел к выводу, что это ошибка Chrome. Он появился только на прошлой неделе или около того. Это происходит только в том случае, если у вас есть карта с центром. Здесь, как воспроизвести проблему.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden;}
            #map-canvas { height: 600px; max-width: 800px; margin: 0 auto; }
        </style>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?key=&sensor=true">
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom: 8
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

Вы должны увидеть центрированную карту. Если вы постепенно изменяете размер своего браузера, горизонтальные линии приходят и уходят. Если вы удаляете margin:0 auto из # map-canvas, карта выравнивается влево и линии исчезают.

В качестве альтернативы добавьте max-width: 100% в # map-canvas, и у вас будет полная карта ширины и нет строк. Таким образом, это только сосредоточенные карты, которые влияют на множество чувствительных сайтов.