Google maps - drag rectangle to zoom

drag-zoom.js

// Zero-dependencies drag zoom control
function dragZoomControl(map) {
	var drawingManager = new google.maps.drawing.DrawingManager();

	drawingManager.setOptions({
		drawingMode : google.maps.drawing.OverlayType.RECTANGLE,
		drawingControl : false,
		rectangleOptions : {
			strokeColor : 'black',
			strokeWeight : 1,
			fillColor : 'black',
			fillOpacity : 0.1,
			editable: false,
		  draggable: false
		}
	});

	var iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.3 134.35"><g><path d="M 0 0 L 0 15 L 15 15 L 15 0 L 0 0 z M 30 0 L 30 15 L 45 15 L 45 0 L 30 0 z M 60 0 L 60 15 L 75 15 L 75 0 L 60 0 z M 90 0 L 90 15 L 105 15 L 105 0 L 90 0 z M 0 30 L 0 45 L 15 45 L 15 30 L 0 30 z M 90 30 L 90 45 L 105 45 L 105 30 L 90 30 z M 85 50 C 66 50 50 66 50 85 C 50 104 66 120 85 120 C 93 120 101 117 107 112 L 129 134 L 139 124 L 116 101 C 119 96 120 91 120 85 C 120 66 104 50 85 50 z M 0 60 L 0 75 L 15 75 L 15 60 L 0 60 z M 85 60 C 99 60 110 71 110 85 C 110 99 99 110 85 110 C 71 110 60 99 60 85 C 60 71 71 60 85 60 z M 0 90 L 0 105 L 15 105 L 15 90 L 0 90 z M 30 90 L 30 105 L 45 105 L 45 90 L 30 90 z " /></g></svg>';

	if(!dragZoomControl.stylesAdded) {
		var css = '.drag-zoom svg, .drag-zoom.active:hover svg { fill: #666; } .drag-zoom:hover svg { fill: #333; }';

		var style = document.createElement('style');
		if(style.styleSheet) {
			style.styleSheet.cssText = css;
		} else {
			style.appendChild(style.appendChild(document.createTextNode(css)));
		}
		document.getElementsByTagName('head')[0].appendChild(style);
		dragZoomControl.stylesAdded = true;
	}

	var control = document.createElement('div');
	control.className = 'drag-zoom';
	control.innerHTML = iconSvg;
	// Note - these values are based on the default Google Maps zoom buttons
	control.style.background = 'white';
	control.style.width = '40px';
	control.style.height = '40px';
	control.style.marginRight = '10px';
	control.style.borderRadius = '2px';
	control.style.padding = '7px';
	control.style.boxShadow = 'rgba(0, 0, 0, 0.3) 0px 1px 4px -1px';
	control.style.cursor = 'pointer';
	control.title = 'Zoom in by dragging a rectangle on the map (shortcut: SHIFT + drag)'

	var isActive = false;
	function setActive(active) {
		drawingManager.setMap(active ? map : null);
		control.style.background = active ? '#333' : 'white';
		control.className = active ? 'drag-zoom active' : 'drag-zoom';
		isActive = active;
	}

	google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
		if(event.type == google.maps.drawing.OverlayType.RECTANGLE) {
			event.overlay.setMap(null);
			map.fitBounds(event.overlay.getBounds());
			setActive(isShiftKeyDown);
		}
	});

	function isShiftKey(event) {
		var key = event.key || event.keyCode;
		return key === 'Shift' || key == 16;
	}

	var isShiftKeyDown = false;
	document.addEventListener('keydown', function(event) {
		if(isShiftKey(event)) {
			isShiftKeyDown = true;
			setActive(true);
		}
	});

	document.addEventListener('keyup', function(event) {
		if(isShiftKey(event)) {
			isShiftKeyDown = false;
			setActive(false);
		}
	});

	control.addEventListener('click', function(event) {
		if(!isShiftKeyDown) {
			setActive(!isActive);
		}
	});

	return control;
}