Google Map API Hong Kong Basemap

by LandsD Map API

HTML

<script src="&quot;https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 9px sans-serif;
}

h1,
p {
  margin: 0;
  padding: 0;
  font: 9px sans-serif;
}

#map_div {
  height: 500px;
}

JavaScript

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'LandsD Map';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  //div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '8';
  div.style.borderStyle = 'none';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#E5E3DF';

  var img = ownerDocument.createElement('img');
  var imgURL = 'https://mapapis01.blob.core.windows.net/tileservices/basemap/WGS84/2016/' + zoom + '/' + coord.x + '/' + coord.y + '.png?'
  imgURL += 'Key=e68810d810e144358961d2295b515f60'

  img.src = imgURL;
  div.appendChild(img);

  return div;
};

google.maps.event.addDomListener(window, "load", function() {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(22.29227, 114.20847),
    zoom: 16,
    //mapTypeId: google.maps.MapTypeId.ROADMAP
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', 'roadmap'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });
  
  map.addListener('maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() !== 'coordinate';
    map.setOptions({
      streetViewControl: showStreetViewControl
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('coordinate',
    new CoordMapType(new google.maps.Size(256, 256)));

  var LabelLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      //alert("a");
      var _url =...