Skip to content

Instantly share code, notes, and snippets.

@jasonclark

jasonclark/gist:960167281dbeb6f79ed3

Last active February 20, 2020 11:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonclark/960167281dbeb6f79ed3 to your computer and use it in GitHub Desktop.
Save jasonclark/960167281dbeb6f79ed3 to your computer and use it in GitHub Desktop.
Download ZIP
Applying the Google Maps UI as an image viewer interface
Raw
gistfile1.txt
<!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