Last active
February 20, 2020 11:17
-
-
Save jasonclark/960167281dbeb6f79ed3 to your computer and use it in GitHub Desktop.
Applying the Google Maps UI as an image viewer interface
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
| <meta charset="utf-8"> | |
| <title>Ground Overlays</title> | |
| <style> | |
| html,body {height:100%;margin:0;padding:0;} | |
| #map {height:100%;} | |
| /*the desired background for the map | |
| #map {background-color:#fff !important;}*/ | |
| /*remove map terms*/ | |
| .gm-style-cc {display:none;} | |
| /*hides Google href*/ | |
| .gm-style div > a {cursor:default;display:none;pointer-events:none;} | |
| /*hides Google href*/ | |
| .gm-style div a img {opacity:0;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| var imageOverlay; | |
| //turn off default map styles to create blank canvas | |
| var mapStyles = [ | |
| { | |
| featureType: 'all', | |
| elementType: 'all', | |
| stylers: [ | |
| { color: '#ffffff' }, | |
| { saturation: -100 }, | |
| { visibility: 'off' } | |
| ] | |
| } | |
| ]; | |
| function initMap() { | |
| if (window.innerWidth > window.innerHeight) { | |
| zoomLevel = Math.round(Math.log(window.innerWidth * 256)); | |
| } else { | |
| zoomLevel = Math.round(Math.log(window.innerHeight * 256)); | |
| } | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| zoom: zoomLevel, | |
| center: {lat: 0, lng: 0}, | |
| panControl: false, | |
| mapTypeControl: false, | |
| streetViewControl: false, | |
| zoomControl: true, | |
| zoomControlOptions: { | |
| style: google.maps.ZoomControlStyle.SMALL | |
| }, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| styles: mapStyles | |
| }); | |
| var imageBounds = { | |
| north: 0.07894911872298, | |
| south: -0.07894911872298, | |
| east: 0.1, | |
| west: -0.1 | |
| }; | |
| imageOverlay = new google.maps.GroundOverlay('ADD-YOUR-IMAGE-FILENAME-OR-URL-HERE', imageBounds); | |
| imageOverlay.setMap(map); | |
| } | |
| </script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=ADD-YOUR-GOOGLE-MAPS-API-KEY-HERE&callback=initMap&signed_in=false" async defer> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment