Created
January 13, 2020 04:33
-
-
Save ammojamo/e29f74369d8605535e0873a7b1dc336c to your computer and use it in GitHub Desktop.
Google maps - drag rectangle to zoom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment