Skip to content

Instantly share code, notes, and snippets.

@zbeat

zbeat/README.md

Last active January 11, 2017 00:05
Show Gist options
  • Save zbeat/6b618dce31bb2e411f5f52786819e82e to your computer and use it in GitHub Desktop.
Save zbeat/6b618dce31bb2e411f5f52786819e82e to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps tiles in Leaflet JS (via GoogleMutant)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps tiles w/ Leaflet JS (via GoogleMutant)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="http://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDm9FChxIfXD9i63TsTYmrkE8IBbzuyVTM" async defer></script>
<script src="http://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js"></script>
<style>
#map {
/* margin: 32px; */
/* width: auto; */
/* overflow: visible; */
width: calc( 100vw - 64px);
height: calc( 100vh - 64px);
}
body {
margin: 0
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var mapopts = {
// zoomSnap: 0.1
};
var latLng = L.latLng(41.31, -72.93);
var zoom = 12;
var map = L.map("map", mapopts).setView(latLng, zoom);
var styles = [];
var mutantMap = L.gridLayer.googleMutant({
// minZoom: 10,
// maxZoom: 20,
type: "roadmap", // valid values: "roadmap", "satellite", "terrain", "hybrid",
styles: styles
});
mutantMap.addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment