GoogleMap WMTS

Google Map WMTS

by allen Yu

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDd7W_wxFArb0vzBpTZ8KbFFNGHJDTc9ps&amp;signed_in=true"></script>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

JavaScript

function initMap() {
  const wmsMapType = new google.maps.ImageMapType({
    maxZoom: 18,
    minZoom: 7,
    name: "EMAP",
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    getTileUrl: function(coord, zoom) {
      return `http://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/${zoom}/${coord.y}/${coord.x}.png`;
    }
  });

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(25.04, 121.505)
  });

  map.overlayMapTypes.insertAt(0, wmsMapType);
}

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