Last active
December 25, 2023 19:15
-
-
Save keccers/6735946 to your computer and use it in GitHub Desktop.
Google Maps Custom Zoom Controls
This file contains hidden or 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
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Custom Controls Test</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| #map-canvas { | |
| height: 1000px; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--[if lt IE 7]> | |
| <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> | |
| <![endif]--> | |
| <div id="map-canvas"> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> | |
| <script src="map.js"></script> | |
| <script src="zoom.js"></script> | |
| <script type="text/javascript"> | |
| MapView.init(); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| var MapView = { | |
| init: function() { | |
| var mapOptions = { | |
| zoom: 10, | |
| center: new google.maps.LatLng(41.850033, -87.6500523), | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| disableDefaultUI: true, //disables default controls so you can add your own back on | |
| }; | |
| var that = this; | |
| this.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); | |
| //Loads custom zoom controls | |
| var zoomDiv = document.createElement('div'); | |
| var renderZoomControls = new ZoomControl(zoomDiv, this.map); | |
| zoomDiv.index = 1; | |
| this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomDiv); | |
| } | |
| } |
This file contains hidden or 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
| function ZoomControl(div, map) { | |
| // Get the control DIV. We'll attach our control UI to this DIV. | |
| var controlDiv = div; | |
| // Set CSS for the controls. | |
| controlDiv.style.margin = '28px 0px 0px 22px'; | |
| controlDiv.style.cursor = 'pointer'; | |
| controlDiv.style.border = "1px solid #9e9e9e" | |
| controlDiv.style.opacity = "0.8"; | |
| controlDiv.style.backgroundColor = "#FFFFFF"; | |
| controlDiv.style.fontFamily = 'Open Sans'; | |
| controlDiv.style.borderRadius = '3px'; | |
| controlDiv.style.height = '36px'; | |
| controlDiv.style.width = '72px'; | |
| var zoomout = document.createElement('div'); | |
| zoomout.title = 'Click to zoom out'; | |
| zoomout.style.display = "inline-block" | |
| zoomout.style.borderRight = "1px solid #9e9e9e" | |
| zoomout.style.width = '50%'; | |
| zoomout.style.height = '100%'; | |
| controlDiv.appendChild(zoomout); | |
| var zoomoutText = document.createElement('div'); | |
| zoomoutText.innerHTML = '<strong>-</strong>'; | |
| zoomoutText.style.fontSize = '30px'; | |
| zoomoutText.style.marginTop = '3px'; | |
| zoomoutText.style.textAlign = 'center'; | |
| zoomoutText.style.color = "#9e9e9e" | |
| zoomout.appendChild(zoomoutText); | |
| var zoomin = document.createElement('div'); | |
| zoomin.title = 'Click to zoom in'; | |
| zoomin.style.display = "inline-block" | |
| zoomin.style.width = '50%'; | |
| zoomin.style.height = '100%'; | |
| controlDiv.appendChild(zoomin); | |
| var zoominText = document.createElement('div'); | |
| zoominText.innerHTML = '<strong>+</strong>'; | |
| zoominText.style.fontSize = '30px'; | |
| zoominText.style.textAlign = 'center'; | |
| zoominText.style.color = "#9e9e9e" | |
| zoomin.appendChild(zoominText); | |
| // Setup the click event listeners for zoom-in, zoom-out: | |
| google.maps.event.addDomListener(zoomout, 'click', function() { | |
| var currentZoomLevel = map.getZoom(); | |
| if(currentZoomLevel != 0){ | |
| map.setZoom(currentZoomLevel - 1);} | |
| }); | |
| google.maps.event.addDomListener(zoomin, 'click', function() { | |
| var currentZoomLevel = map.getZoom(); | |
| if(currentZoomLevel != 21){ | |
| map.setZoom(currentZoomLevel + 1);} | |
| }); | |
| } |
Thanks :)
Thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks