发表新帖
发表新帖

Google Maps random vertical line in Chrome

前端 未结
关注
5 1590
Happy的楠姐
Happy的楠姐 2020-12-17 10:58

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

相关标签:
5条回答
  • [愿得一人]
    2020-12-17 11:17

    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.

    0 讨论(0)
  • 盖世英雄少女心
    2020-12-17 11:18

    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

    0 讨论(0)
  • 一生所求
    2020-12-17 11:22

    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.

    0 讨论(0)
  • 醉话见心
    2020-12-17 11:36

    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>
    0 讨论(0)
  • 春和景丽
    2020-12-17 11:40

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题