Google Maps Osm

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="zoom"></div>
<div id="map">Map</div>

CSS

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

JavaScript

var map = null;

function initialize() {

  if (map == null) {
    var mapTypeIds = [];
    for (var type in google.maps.MapTypeId) {
      mapTypeIds.push(google.maps.MapTypeId[type]);
    }
    mapTypeIds.push("OSM");


    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(36.1447400, -5.3525700),
      gestureHandling: 'cooperative',
      mapTypeId: google.maps.MapTypeId.ROADMAP, //JNC.Views.gNavionicsOverlay.CHARTS.NAUTICAL,
      disableDefaultUI: false,
      zoomControl: true,
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: mapTypeIds
      }
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {
      document.getElementById('zoom').innerHTML = map.getZoom();
    });
    var maptiler = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        var tilesPerGlobe = 1 << zoom;
        var x = coord.x % tilesPerGlobe;
        if (x < 0) {
          x = tilesPerGlobe + x;
        }
        // See above example if you need smooth wrapping at 180th meridian
        console.log("getTileUrl:"+"http://tiles.openseamap.org/seamark/" + zoom + "/" + x + "/" + coord.y + ".png");
        return "http://tiles.openseamap.org/seamark/" + zoom + "/" + x + "/" + coord.y + ".png";
      },
      tileSize: new google.maps.Size(256, 256),
      name: "OpenStreetMap",
      isPng: true,
      //maxZoom: 18,
      opacity: 1
    });


    //OSM Convert Scripts
    RAD2DEG = 180 / Math.PI;
    PI_4 = Math.PI / 4;

    /* The following functions take or return their results in degrees */

    function y2lat(y) {
      return (Math.atan(Math.exp(y / RAD2DEG)) / PI_4 - 1) * 90;
    }

    function x2lon(x) {
      return x;
    }

    function lat2y(lat) {
      return Math.log(Math.tan((lat / 90 + 1) * PI_4)) * RAD2DEG;
    }

    function lon2y(lon) {
      return lon;
    }

    function deg_rad(ang) {
     ...