Google Maps Custom Layer Test

by bulutkartal

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 2,
  maxZoom: 8,
  minZoom: 1,
  center: {
    lat: 0,
    lng: -0
  },
  disableDefaultUI: false,
  zoomControl: true,
  mapTypeControl: false,
  streetViewControl: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

function CenterControl(controlDiv, map) {

  // Bulut Custom Map Control
  var controlUI = document.createElement('div');
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Please Select a Weather Layer';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.innerHTML = '<table id="otherlayers"><tbody><tr><td><input type="checkbox" id="gebco" data-opacity="1"><label for="gebco">Gebco Layer Test</label></td></tr></tbody></table>';
  controlUI.appendChild(controlText);

$(document).on("change", "#otherlayers input[id='gebco']", function (e) {        
        setgebcolayer(this);
         var layerArray = map.overlayMapTypes.getArray();
            console.log(layerArray);
    });

}

var gebcoLayer =
            new google.maps.ImageMapType(
                {
                    getTileUrl: function (coord, zoom) {
                        var tilesPerGlobe = 1 << zoom;
                        var x = coord.x % tilesPerGlobe;
                        if (x < 0) {
                            x = tilesPerGlobe + x;
                        }

                        var bbox2 = tileCoordsToBBox(map, coord, zoom, 256, 256);
                        var url = "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?request=getmap&service=wms&BBOX=" + bbox2 + "&crs=EPSG:4326&format=image/png&layers=gebco_latest&width=256&height=256&version=1.3.0"
                        return url;
                    },
                    tileSize: new google.maps.Size(256, 256),
                    name: "Gebco",
                    isPng: true,
                    maxZoom: 18,
...