Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Applying the Google Maps UI as an image viewer interface
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
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;}
<div id="map"></div>
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);
<script src="" async defer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.