I am trying to leverage my GeoServer and add a WMS layer to a map created with of Google Maps.

What I am getting instead is the tile repeated across the display. I am passing the BBox from the current map extent to the WMS request which works properly as a standalone URL but somehow displays incorrectly on the map.

I am familiar with GeoServer and the WMS request but new to Google Maps JavaScript API.

Here is what I have tried and the resulting image.

    google.maps.event.addListener(map, "bounds_changed", function () {
        var censusLayer =
            new google.maps.ImageMapType(

                    getTileUrl: function (coord, zoom) {
                        var ne = map.getBounds().getNorthEast();
                        var sw = map.getBounds().getSouthWest();
                        var bbox = sw.lng() + "," + sw.lat() + "," + ne.lng() + "," + ne.lat();

                        var container = document.getElementById('map');
                        // from geoserver
                        // from application

                        //base WMS URL
                        var url = ""

                        url += "service=WMS";           //WMS service
                        url += "&version=1.1.0";         //WMS version
                        url += "&request=GetMap";        //WMS operation
                        url += "&layers=hcad:parcels_simple_4326"; //WMS layers to draw
                        url += "&styles=";               //use default style
                        url += "&bbox=" + bbox;          //set bounding box for tile
                        url += "&width=256" //+ container.offsetWidth;
                        url += "&height=256" //+ container.offsetHeight;
                        url += "&srs=EPSG:4326";         //projection WGS84;
                        url += "&format=image%2Fpng";      //image format
                        url += "&TRANSPARENT=TRUE";      //only draw areas where we have data
                        url += "&tiled=true";

                        return url; //return WMS URL for the tile
                        return container;

                    tileSize: new google.maps.Size(256, 256),
                    opacity: 0.5,
                    isPng: true

        //add WMS layer to map

And the result so far...

enter image description here

  • 2
    Google maps uses EPSG:3857 not EPSG:4326 – Ian Turton Oct 2 '18 at 7:38
  • Thanks for sharing @IanTurton. for simplicity I have reuploaded to geoserver in crs 3857 and adjusted the srs parameter to match. Now I recieve no error and no image? Is there anything missing from the request? – wtgeographer Oct 5 '18 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.