Openseamap on gm

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 44.5,
      lng: 13.1
    },
    mapTypeControlOptions: {
      mapTypeIds: ['satellite', 'roadmap']
    }
  });


  var osmMapTypeOptions = {
    getTileUrl: function(coord, zoom) {
      console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
      var z = zoom;
      var limit = Math.pow(2, z);
      if (coord.y < 0 || coord.y >= limit) {
        return null;
      } else {
        coord.x = ((coord.x % limit) + limit) % limit;
        url = "http://t1.openseamap.org/seamark/";
        path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
        console.log("getTileUrl:" + url + path);
        return url + path;
      
      }
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 19,
    minZoom: 0,
    name: "OSM"
  };

  function getTileURL(bounds) {
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    var limit = Math.pow(2, z);
    if (y < 0 || y >= limit) {
      return null;
    } else {
      x = ((x % limit) + limit) % limit;
      url = this.url;
      path = z + "/" + x + "/" + y + "." + this.type;
      if (url instanceof Array) {
        url = this.selectUrl(path, url);
      }
      return url + path;
    }
  }

  var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);

  map.overlayMapTypes.insertAt(0,osmMapType);
  map.overlayMapTypes.insertAt(1,osmMapType);

}
google.maps.event.addDomListener(window, "load", initMap);