How to remove white grid line from google map? I have added zoom:0.7 css property to map div and from my research, these properties are adding the white lines.

Is it possible to remove white line from google map without removing zoom property? As I need the map to be exactly same as it is right now. Or do we have an alternative to zoom?

Here is the code:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    disableDefaultUI: true,
    center: {
      lat: 38.755724,
      lng: -96.492369
    }
  });

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  zoom: 0.7;
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
}

<div id="map"></div>
<script async defer src=""></script>

How to remove white grid line from google map? I have added zoom:0.7 css property to map div and from my research, these properties are adding the white lines.

Is it possible to remove white line from google map without removing zoom property? As I need the map to be exactly same as it is right now. Or do we have an alternative to zoom?

Here is the code:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    disableDefaultUI: true,
    center: {
      lat: 38.755724,
      lng: -96.492369
    }
  });

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  zoom: 0.7;
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Here is how it looks:

• javascript
• css
• google-maps

• Those are the boundaries of the map tiles. – geocodezip Commented Oct 27, 2016 at 16:03
• Is there a way to get rid of those? – dang Commented Oct 27, 2016 at 18:15
• Why would you use zoom. It also screws mouse events. – Gokhan Kurt Commented Oct 31, 2016 at 13:42
• I need 4.6 as my zoom level which I'm not able to set as api only takes integer values. – dang Commented Oct 31, 2016 at 13:44

9 Answers 9

This is because you're scaling the map. Try adding a transform-style:preserve-3d; and then translate the item on the Z axis to scale.

If you do this:

transform-style:preserve-3d;
transform:perspective(500px) translateZ(-30vw) scale(1.4);
perspective:1000;

You're scaling UP, which should circumvent the issue. Weird things happen when you scale items containing other scaled items DOWN.

The translateZ(-30vw) is saying, 30% of the viewport width. I've had a few beers, but I think that might be the same as 0.7 zoom, which is calculated from item width (100% viewport width).

Then just play with the scale until you're at the synthetic zoom level you were looking for.

i just did

#map img[role=presentation] {
  width:257px !important;
  height: 257px !important;
}

Note : change (500px) to (auto)

Change this style - for full screen with map centered.

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
  transform-style:preserve-3d;
  transform:perspective(auto) translateZ(-30vw) scale(1.4);
  perspective:1000;     
}

DEMO

Google Map - full screen

In case someone faces the same problem still, as I did today;

If your display scale in Windows 10 display settings isn't 100%, the random grid/vertical/horizontal lines can appear. This also affects only Chrome.

In hope of saving you some time, I don't believe that what you are trying to achieve is possible via CSS transform hacks or zoom (no-no). You are fighting head-on with platform-specific hardware rendering, Google's map rendering engine, browser implementation variety, etc. and all you have for you is a handful of CSS rules to work around those three giants.

In short and for example: even if you got it to work OK in Chrome on the Mac, Firefox on Windows might still show tile boundaries or other artefacts.

More constructively, you might want to try Leaflet.js which will give you a lot more options and control over your map and allow you use tiles that support non-integer zoom levels.

The best way to avoid that blank lines is forcing a integer value in the aggregated zoom. The zoom :5 from map invocation can be zoom: 4 to mimic the effect of the zoom: 0.7 in the CSS.

If you get that number by a calculation, be sure of putting that in a Math.round.

In fact, zoom: 4 is not the same exact appearance of the map, but you cannot use float fields in that property. If you wish to remove the blank lines, is better to get the map zoom via the zoom property of google map, directly, since css zoom is a deprecated, old-style IE property that should be avoided.

https://css-tricks.com/almanac/properties/z/zoom/

https://developers.google.com/maps/documentation/static-maps/intro#Zoomlevels

Also, the center of the map is now in the center of the mapview.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    disableDefaultUI: true,
    center: {
      lat: 38.755724,
      lng: -96.492369
    }
  });

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Had the same problem with my map and got a CSS solution:

#map [tabindex="0"] > div:first-child {
    will-change: transform;
}

So many years on and we're still having the same issue. Scaling up the whole map element will cause other issues such as the controls not appearing anymore. The below is the best working solution for myself. Putting it here incase it might others who is facing the same issue. I can still see the lines appearing when zooming in and out for a split second and then it corrects it self. Change the scale amount to suit your needs.

(Chromium: 101.0.4951.54 on macos)

#map [tabindex="0"] img {
  transform: scale(1.001);
}

Check this, It may help you

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Showing/Hiding overlays</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      // This example adds hide() and show() methods to a custom overlay's prototype.
      // These methods toggle the visibility of the container <div>.
      // Additionally, we add a toggleDOM() method, which attaches or detaches the
      // overlay to or from the map.

      var overlay;

      USGSOverlay.prototype = new google.maps.OverlayView();

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: {lat: 62.323907, lng: -150.109291},
          mapTypeId: 'satellite'
        });

        var bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(62.281819, -150.287132),
            new google.maps.LatLng(62.400471, -150.005608));

        // The photograph is courtesy of the U.S. Geological Survey.
        var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
        srcImage += 'examples/full/images/talkeetna.png';

        overlay = new USGSOverlay(bounds, srcImage, map);
      }

      /** @constructor */
      function USGSOverlay(bounds, image, map) {

        // Now initialize all properties.
        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;

        // Define a property to hold the image's div. We'll
        // actually create this div upon receipt of the onAdd()
        // method so we'll leave it null for now.
        this.div_ = null;

        // Explicitly call setMap on this overlay
        this.setMap(map);
      }

      /**
       * onAdd is called when the map's panes are ready and the overlay has been
       * added to the map.
       */
      USGSOverlay.prototype.onAdd = function() {

        var div = document.createElement('div');
        div.style.border = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';

        // Create the img element and attach it to the div.
        var img = document.createElement('img');
        img.src = this.image_;
        img.style.width = '100%';
        img.style.height = '100%';
        div.appendChild(img);

        this.div_ = div;

        // Add the element to the "overlayImage" pane.
        var panes = this.getPanes();
        panes.overlayImage.appendChild(this.div_);
      };

      USGSOverlay.prototype.draw = function() {

        // We use the south-west and north-east
        // coordinates of the overlay to peg it to the correct position and size.
        // To do this, we need to retrieve the projection from the overlay.
        var overlayProjection = this.getProjection();

        // Retrieve the south-west and north-east coordinates of this overlay
        // in LatLngs and convert them to pixel coordinates.
        // We'll use these coordinates to resize the div.
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

        // Resize the image's div to fit the indicated dimensions.
        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
      };

      USGSOverlay.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
      };

      // Set the visibility to 'hidden' or 'visible'.
      USGSOverlay.prototype.hide = function() {
        if (this.div_) {
          // The visibility property must be a string enclosed in quotes.
          this.div_.style.visibility = 'hidden';
        }
      };

      USGSOverlay.prototype.show = function() {
        if (this.div_) {
          this.div_.style.visibility = 'visible';
        }
      };

      USGSOverlay.prototype.toggle = function() {
        if (this.div_) {
          if (this.div_.style.visibility === 'hidden') {
            this.show();
          } else {
            this.hide();
          }
        }
      };

      // Detach the map from the DOM via toggleDOM().
      // Note that if we later reattach the map, it will be visible again,
      // because the containing <div> is recreated in the overlay's onAdd() method.
      USGSOverlay.prototype.toggleDOM = function() {
        if (this.getMap()) {
          // Note: setMap(null) calls OverlayView.onRemove()
          this.setMap(null);
        } else {
          this.setMap(this.map_);
        }
      };

      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  </head>
  <body>
<!-- Add an input button to initiate the toggle method on the overlay. -->
    <div id="floating-panel">
      <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
      <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
    </div>
    <div id="map"></div>
  </body>
</html>