Remove grid lines on Google Maps caused by zoom

Question

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:

Answer 1

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.

Answer 2

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