Last active
July 10, 2021 13:37
Adjustment Test of Google Maps API
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> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Adjustment Test of Google Maps API</title> | |
<style> | |
#toggle { | |
position: absolute; | |
z-index: 1; | |
} | |
#map-canvas { | |
height: 80%; | |
left: 5%; | |
position: absolute; | |
top: 10%; | |
width: 90%; | |
z-index: 0; | |
} | |
</style> | |
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCAdLvkz33nxRiABwlqlcBXYccNd0lRnGI"></script> | |
<script defer> | |
(function (w, d, n, GM) { | |
var fragment = d.createDocumentFragment(); | |
var mapCanvas = d.createElement('div'); | |
mapCanvas.setAttribute('id', 'map-canvas'); | |
// It's OK to instantiate Map constructor before `DOMContentLoaded` | |
// IF you call `reset` process below after appending to DOM | |
var latLng = new GM.LatLng(35.6833, 139.6833); | |
var map = new GM.Map(mapCanvas, { center: latLng, zoom: 10 }); | |
var toggled = true; | |
// Important process to redraw Google Maps DOM | |
var reset = function (center, zoom) { | |
// Force the map to trigger resize event | |
GM.event.trigger(map, 'resize'); | |
// Adjust center and zoom from previous values | |
map.setCenter(center || map.getCenter()); | |
map.setZoom(zoom || map.getZoom()); | |
}; | |
var toggle = function (ev) { | |
if (toggled) { | |
fragment.appendChild(mapCanvas); | |
toggled = false; | |
} else { | |
d.body.appendChild(fragment); | |
reset(); | |
toggled = true; | |
} | |
}; | |
var main = function () { | |
GM.event.addDomListener(d.getElementById('toggle'), 'click', toggle); | |
d.body.appendChild(mapCanvas); // Insert into the actual DOM | |
mapCanvas.style.position = 'absolute'; // Override Google Maps style once | |
reset(latLng, 10); // Do reset | |
}; | |
GM.event.addDomListener(w, 'load', main); | |
})(window, document, navigator, google.maps); | |
</script> | |
</head> | |
<body> | |
<button id="toggle">toggle map view</button> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview: http://bl.ocks.org/97863147bd208b3204f8