jpoehnelt/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>WMS and Google Maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

      function xyzToBounds(x, y, z) {
        var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
        var minx = EXTENT[0] + x * tileSize;
        var maxx = EXTENT[0] + (x + 1) * tileSize;
        // remember y origin starts at top
        var miny = EXTENT[1] - (y + 1) * tileSize;
        var maxy = EXTENT[1] - y * tileSize;
        return [minx, miny, maxx, maxy];
      }

      var getTileUrl = function(coordinates, zoom) {
        return (
          "https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
          "&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
          "&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
          "&FORMAT=image%2Fpng" +
          "&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
          "&BBOX=" +
          xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
        );
      };

      function initMap() {
        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 18,
          center: { lat: 37.783, lng: -122.403 }
        });

        var landcover = new google.maps.ImageMapType({
          getTileUrl: getTileUrl,
          name: "Landcover",
          alt: "National Land Cover Database 2016",
          minZoom: 0,
          maxZoom: 19,
          opacity: 1.0
        });
        map.overlayMapTypes.push(landcover);
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WMS and Google Maps</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

	function xyzToBounds(x, y, z) {
	var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
	var minx = EXTENT[0] + x * tileSize;
	var maxx = EXTENT[0] + (x + 1) * tileSize;
	// remember y origin starts at top
	var miny = EXTENT[1] - (y + 1) * tileSize;
	var maxy = EXTENT[1] - y * tileSize;
	return [minx, miny, maxx, maxy];
	}

	var getTileUrl = function(coordinates, zoom) {
	return (
	"https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
	"&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
	"&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
	"&FORMAT=image%2Fpng" +
	"&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
	"&BBOX=" +
	xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
	);
	};

	function initMap() {
	var map = new google.maps.Map(document.getElementById("map"), {
	zoom: 18,
	center: { lat: 37.783, lng: -122.403 }
	});

	var landcover = new google.maps.ImageMapType({
	getTileUrl: getTileUrl,
	name: "Landcover",
	alt: "National Land Cover Database 2016",
	minZoom: 0,
	maxZoom: 19,
	opacity: 1.0
	});
	map.overlayMapTypes.push(landcover);
	}

	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
	</script>
	</body>
	</html>