title: Tiling contiguous polygons in Google Maps
body: <p>I'm trying to draw a hexagonal grid in Google Maps. I've come up with a solution  based off <a href="https://stackoverflow.com/a/35470086/3088826">this answer</a> which looks fine at higher zooms, but when zoomed further out I find that the classic "orange-peel" problem occurs: The hexagons no longer fit together like they should:</p>
  
  <p><a href="https://i.stack.imgur.com/x5sBs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x5sBs.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/i94xt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i94xt.jpg" alt="enter image description here"></a></p>
  
  <p>I'm using <a href="https://github.com/chrisveness/geodesy/" rel="nofollow noreferrer">this rather cool geodesy library</a> to calculate hexagon centers based on an ellipsoidal model (since a 2d model clearly doesn't work on a real-world map) but it's still looking pretty bad when zoomed out.</p>
  
  <p>Preferably, I'd like to draw the hexagons in such a way that they are exactly the same shape and size on screen.</p>
  
  <p>Here's the code I've been working with, also available as a <a href="http://plnkr.co/edit/K2n7UskGmroZKlOGCdpW?p=preview" rel="nofollow noreferrer">Plunker here.</a> I've tried calculating the vertices of each polygon using the same geodesy library that I'm using to calculate the polygon centers, but it still doesn't look right when zoomed out.</p>
  
  <pre><code>  var hexgrid = [];
  
    function initialize(){
      // Create the map.
  
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 51.5, lng: 0},
        scrollwheel: true,
        zoom: 8
      });
  
  
      // This listener waits until the map is done zooming or panning,
      // Then clears all existing polygons and re-draws them.
      map.addListener('idle', function() {
  
          // Figure out how big our grid needs to be
          var spherical = google.maps.geometry.spherical, 
          bounds = map.getBounds(), 
          cor1 = bounds.getNorthEast(), 
          cor2 = bounds.getSouthWest(), 
          cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
          cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
          diagonal = spherical.computeDistanceBetween(cor1,cor2), 
          gridSize = diagonal / 20;
  
        // Determine the actual distance between tiles
          var d = 2 * gridSize * Math.cos(Math.PI / 6);
  
          // Clear all the old tiles
          hexgrid.forEach(function(hexagon){
              hexagon.setMap(null);
          });
          hexgrid = [];
  
          // Determine where the upper left-hand corner is.
              bounds = map.getBounds();
              ne = bounds.getNorthEast();
              sw = bounds.getSouthWest();
  
              var point = new LatLon(ne.lat(), sw.lng());
  
              // ... Until we're at the bottom of the screen...
          while(point.lat &gt; sw.lat()){
          // Keep this so that we know where to return to when we're done moving across to the right
              leftPoint =  new LatLon(point.lat, point.lon).destinationPoint(d, 150).destinationPoint(d, 210).destinationPoint(d, 270).destinationPoint(d, 90)
  
              step = 1;
  
              while(point.lon &lt; ne.lng()){
                // Use the modulus of step to determing if we want to angle up or down
                  if (step % 2 === 0){
                      point = new LatLon(point.lat, point.lon).destinationPoint(d, 30);
                  } else {
                      point = new LatLon(point.lat, point.lon).destinationPoint(d, 150);
                  }
  
                  step++; // Increment the step
  
                  // Draw the hexagon!
                  // First, come up with the corners.
                  vertices = [];
                  for(v = 1; v &lt; 7; v++){
                      angle = v * 60;
                      vertex = point.destinationPoint(d / Math.sqrt(3), angle);
                      vertices.push({lat: vertex.lat, lng: vertex.lon});
                  }
  
            // Create the shape
                  hexagon = new google.maps.Polygon({
                      map: map,
                      paths: vertices,
                      strokeColor: '#090',
                      strokeOpacity: 0.8,
                      strokeWeight: 2,
                      fillColor: '#090',
                      fillOpacity: 0.1,
                      draggable: false,
                  });
  
                  // Push it to hexgrid so we can delete it later
                  hexgrid.push(hexagon)
              }
  
              // Return to the left.
              point = leftPoint;
          }
      });
    }
  
    google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>