JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

html, body {
	height: 100%;
}

#map {
    width:100%;
    height: 100%;
    border: 1px solid black;
}

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
    disableDefaultUI: true,
    center: new google.maps.LatLng(32.3985, -3.6914),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 3
});

map.fitBounds(getBounds(), {
    animate: false
});

google.maps.event.addListener(map, 'idle', function() {
    console.log("idle");
    saveBounds(map.getBounds());
});

function getBounds() {
    if (!localStorage.bounds) {
        return false;
    }
    
    var boundObj = JSON.parse(localStorage.bounds);
    
    var southWest = new google.maps.LatLng(boundObj[0], boundObj[1]);
    var northEast = new google.maps.LatLng(boundObj[2], boundObj[3]);
    var bounds = new google.maps.LatLngBounds(southWest, northEast);
    
    return bounds;
};

function saveBounds(bounds) {
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var boundsArr = [sw.lat(), sw.lng(), ne.lat(), ne.lng()];
    localStorage.bounds = JSON.stringify(boundsArr);
}