JSFiddle - React, Tailwind, and code Playground

by Ivan Shukshin

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry,drawing"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="out" class="control-wrap">

</div>
<div id="map-canvas"></div>
<div id="map-canvas-hidden" style="height:100%;width:100%;"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#map-canvas-hidden{
  height: 100%;
  width: 100%;
  opacity:0;
  z-index: -1;
}
#out{
  position:absolute;
  box-sizing: content-box;
  top:0px; 
  right: 10px;
  height:20px;
  width:95px;
  background: lightgreen;
  z-index: 100000;
  padding: 8px 5px;
  font-size:12px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}

JavaScript

//

var map; 		// map object
var preMap; // hidden map object

var center = {lat: 38.8709, lng: -77.0556};
var minZoom = 3;
var maxZoom = 16;


function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(center.lat, center.lng),
    zoom: minZoom
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions);
            
    // init the hidden map
  var mapOptions = {
    center: new google.maps.LatLng(center.lat, center.lng),
    zoom: minZoom + 1
  };
  var preMap = new google.maps.Map(document.getElementById('map-canvas-hidden'), mapOptions);
  
  // when the current hidden map is fully loaded, zoom it in
  preMap.addListener('tilesloaded', function() {
  	$('#out').html('Zoom ' + preMap.getZoom() + ' preloaded');
    
    // if there is zoom to zoom-in, do it after some rest
    if(preMap.getZoom() < maxZoom) {
      setTimeout(function(){
      	preMap.setZoom(preMap.getZoom() + 1);
      }, 50);
    }
  });
}

window.onload = initialize;