title: Display geoserver WMS layer on Google MAP where datasource for Geoserver is PostGreSQL
body: <p>I am working on a web application of ASP.NET with the following API/tools Google Map, GeoServer, PostGreSQL(With POSTGIS).
      I have a requirement to display WMS layer of GeoServer on the google map V3.26.Data source of GeoServer is POSTGIS. I have inserted hundreds of MULTILINESTRING in PostGreSQL(With POSTGIS) using the below given scripts.</p>
  
  <pre><code>INSERT INTO public."LineData"("ID", "LineCoordinates")    values('11195625',ST_GEOMFROMTEXT('MULTILINESTRING ((&lt;Latitude Longitude&gt;))',4326));
  </code></pre>
  
  <p>Then publish a layer in Geoserver that use the data from "LineData" table and keep Native SRC EPSG:4326. To display this layer on Google Map V3.26, I have used the below given code. 
  The problem is that tiles are not rendering correctly. They are broken and shown at wrong places. Can anyone tell what wrong I am doing?</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Google Map with Geoserver WMS Overlay&lt;/title&gt;
  
          &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&amp;language=en-US"&gt;&lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              html {
                  height: 100%;
              }
  
              body {
                  height: 100%;
                  margin: 0px;
                  padding: 0px;
              }
  
              #map_canvas {
                  height: 100%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body onload="initialize()"&gt;
          &lt;h1&gt;Google Map with Geoserver WMS and KML Overlay&lt;/h1&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
      &lt;script type="text/javascript"&gt;
          var TILE_SIZE = 256;
  
          var wmsparams = [
             "SERVICE=WMS",
             "VERSION=1.1.1",
            "REQUEST=GetMap",
            "FORMAT=image/png",
            "TRANSPARENT=TRUE",
            "BGCOLOR=0xFFFFFF",
            "SRS=EPSG:4326",
            "WIDTH=256",
            "HEIGHT=256"
          ];
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function initialize() {
              // Create a MapOptions object with the required properties for base map
              var mapOptions = {
                  zoom: 9,
                  center: new google.maps.LatLng(36.04450, -80.34747),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
  
              // 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 = parseFloat(gBl.lat()) + "," + parseFloat(gBl.lng()) + "," + parseFloat(gTr.lat()) + "," + parseFloat(gTr.lng());
  
                       //base WMS URL
                       var url = "http://localhost:8080/geoserver/TestWorkSpace/wms?";
  
                       url += "&amp;service=WMS";           //WMS service
                       url += "&amp;version=1.1.0";         //WMS version
                       url += "&amp;request=GetMap";        //WMS operation
                       url += "&amp;layers=TestLayer"; //WMS layers to draw
                       url += "&amp;styles=";               //use default style
                       url += "&amp;format=image/png";      //image format
                       url += "&amp;TRANSPARENT=TRUE";      //only draw areas where we have data
                       url += "&amp;srs=EPSG:4326";         //projection WGS84
                       url += "&amp;bbox=" + bbox;          //set bounding box for tile
                       url += "&amp;width=256";             //tile size used by google
                       url += "&amp;height=256";
                       //url += "&amp;tiled=true";
                       return url;                 //return WMS URL for the tile
                   },
                   tileSize: new google.maps.Size(256, 256),
                   opacity: 0.85,
                   isPng: true
               });
  
              // add WMS layer to map
              map.overlayMapTypes.push(censusLayer);
          }
      &lt;/script&gt;
  
  
  Thanks
  </code></pre>