WMS example

HTML

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

CSS

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

JavaScript

var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(37.271427,-122.115603), // Volda
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

var Wms = 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.
            
            // bottom left / SW
            var gBl = map.getProjection().fromPointToLatLng(
              new google.maps.Point(coord.x * twidth / s, (coord.y + 1) * theight / s)); 
                        
            // top right / NE
            var gTr = map.getProjection().fromPointToLatLng(
            	new google.maps.Point((coord.x + 1) * twidth / s, coord.y * theight / s)); 

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

            //base WMS URL
            var url = 'https://gis.cupertino.org/cupgis/services/Public/AmazonData/MapServer/WmsServer';
            

            url += "?service=WMS"; //WMS service
            url += "&version=1.1.0"; //WMS version 
            url += "&request=GetMap"; //WMS operation
            url += "&layers=37"; //WMS layers to draw
            url += "&styles="; //use default style
            url += "&format=image/png"; //image format
            url += "&TRANSPARENT=TRUE"; //only draw areas where we have data
            url += "&srs=EPSG:4326";...