JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div class="mapCanvasContainer">
    <div class="mapCanvas"></div>
    <div class="box"></div>
    <a href="#" class="handle">Enlarge</a>
</div>

CSS

body {
    font: 14px Arial;
}

.mapCanvasContainer {
    position: relative;    
}

.mapCanvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.box {
    width: 100px;
    height: 200px;    
}

.handle {
    color: #fff;
    padding: 10px;
    margin: 0 0 0 -30px;
    background: #333;
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
}

JavaScript

function loadGoogleMaps(MarkerLatitude, MarkerLongitude, Container) {

	var thisFunc = this,
		map,
		marker;

	thisFunc.init = function () {

		var LatLng = new google.maps.LatLng(parseFloat(MarkerLatitude), parseFloat(MarkerLongitude)),
			mapOptions = {
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: LatLng
			}

		map = new google.maps.Map(Container.get(0), mapOptions);
		marker = new google.maps.Marker({
			position: LatLng,
			map: map
		});

		google.maps.event.addDomListenerOnce(map, 'idle', function () {
		    google.maps.event.addDomListener(window, 'resize', function () {
		        map.setCenter(LatLng);
		    });
		});
	}
    thisFunc.getMap = function() {
        return map;
    }
	thisFunc.init();
}

function enlarge() {
    var handle = jQuery('.handle'),
        mapCanvasContainer = jQuery('.mapCanvasContainer');
    
    handle.on('click', function() {
        var thisHandle = jQuery(this);
        
        if (!mapCanvasContainer.hasClass('fullscreen')) {           
            mapCanvasContainer.addClass('fullscreen');              
            thisHandle.text('Cancel');
        } else {           
            mapCanvasContainer.removeClass('fullscreen');
            thisHandle.text('Enlarge');
        }
        google.maps.event.trigger(test.getMap(), 'resize')
        return false;
    });
}

var test = new loadGoogleMaps(53.130721, -1.159097, jQuery('.mapCanvas'));
enlarge();