Google Maps random vertical line in Chrome

问题

I am implementing google maps on my website and I just started noticing this line appearing. It only happens in Chrome (Windows) and no matter how far I step back in my code I can't seem to make it disappear. As you zoom out, the line randomly renders elsewhere in the viewport, generally on the right side.

Any thoughts on what may be causing this?

Here is the CSS I have applied to the 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*/

   }

And here is the basic HTML structure of the map canvas item.

  <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:

I had the same problem on chrome, i switched to the version 3.14 and this solved the problem if you include the script for google like this it should solve the problem

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

回答2:

It was a zoom issue for me on chrome.

Can you check your browser zoom? This is often an issue when the zoom puts the tiles at non-integer pixel coordinates. You can reset the zoom by hitting ctrl-0.

回答3:

This issue has been confirmed on GMAP-API_Issue V3(here).

Although widely reported as white lines issue, the color of these erroneous lines is the map's backgroundColor : selected on map option.

btargac solution worked for me.

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

Thanks

回答4:

I am also seeing this problem. It seems to appear whenever a vertical scrollbar is displayed. Tom's above answer removes the scrollbar, but that might not be a viable solution for most people. This is most likely a Chrome bug. They've made a lot of changes to the scrollbars over the past months, so this isn't surprising.

回答5:

Same issue here. I've come to the conclusion it is a Chrome bug. It's only shown up in the past week or so. It only occurs if you have a map centred. Here's how to reproduce the issue.

<!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>

You should see a centred map. If you resize your browser slowly the horizontal lines come and go. If you remove the margin:0 auto from #map-canvas the map aligns left and the lines are gone.

Alternatively, add max-width: 100% to #map-canvas and you'll have a full width map and no lines. So, it's only centred maps which affects a lot of responsive sites.

来源：https://stackoverflow.com/questions/22997181/google-maps-random-vertical-line-in-chrome

标签

google-maps-api-3