Google Maps with WMS

by HoffZ

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&amp;dummy=.js"></script>
<br>
<br>
<div id="map_canvas"></div>

CSS

#map_canvas {
    width:100%;
    height:250px;
    border: 1px solid #4D2722;
}

JavaScript

function StatkartMapType(name, layer) {
    this.layer = layer
    this.name = name
    this.alt = name

    this.tileSize = new google.maps.Size(256, 256);
    this.maxZoom = 19;
    this.getTile = function (coord, zoom, ownerDocument) {
        var div = ownerDocument.createElement('DIV');
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.backgroundImage = "url(https://gmiwms-hamar.hedmarkenkart.no/geminimapserver/gemini-va.wms?request=getCapabilities?layers=" + this.layer + "&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + ")";
        return div;
    };
}
var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(60.456589, 12.057614),
    mapTypeControlOptions: {
        mapTypeIds: ['kartdata2', 'sjo_hovedkart2', 'topo2', 'topo2graatone', 'toporaster2', 'europa'],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

var geoDataWms = function () {
    // Create the base map 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    //Define custom WMS layer for census output areas in WGS84
    var censusLayer = new google.maps.ImageMapType({
        getTileUrl: function (coord, zoom) {
            // Compose URL for overlay tile

            var s = Math.pow(2, zoom);
            var twidth = 256;
            var theight = 256;

            //latlng bounds of the 4 corners of the google tile
            //Note the coord passed in represents the top left hand (NW) corner of the tile.
            var gBl = map.getProjection().fromPointToLatLng(
            new google.maps.Point(coord.x * twidth / s, (coord.y + 1) * theight / s)); // bottom left / SW
            var gTr = map.getProjection().fromPointToLatLng(
            new google.maps.Point((coord.x + 1) * twidth / s, coord.y * theight / s)); // top right / NE

            // Bounding box coords for tile in WMS pre-1.3 format (x,y)
            var bbox = gBl.lng() + "," +...