test_objective_

by Wolf

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Image map types</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */

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

    </style>
  </head>

  <body>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.32&key=AIzaSyCI_ODbCCKD0ljgcCmDX39hlcVEdLBuP_s&sensor&callback=initMap">


    </script>
  </body>

</html>

JavaScript

function MyProjection() {

  this.width = 351;
  this.height = 234;
}
var MAX=351/234;

MyProjection.prototype.fromLatLngToPoint = function(latLng) {
  var x_scale = this.height/this.width;
  var y_scale = 1;
  var x = latLng.lng() * x_scale * this.width;
  var y = latLng.lat() * y_scale * this.height;
  return new google.maps.Point(x, y);
};

MyProjection.prototype.fromPointToLatLng = function(point) {
  var x_scale = this.height/this.width;
  var y_scale = 1;
  var lng = (point.x / x_scale) * (1.0 / this.width);
  var lat = (point.y / y_scale) * (1.0 / this.height);
  return new google.maps.LatLng(lat, lng);
};

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 0.5,
      lng: 0.5*MAX
    },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['cliff']
    }
  });

  var cliffMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
        return null;
      }
      var bound = Math.pow(2, zoom);

      return 'http://climbmaps.com/ph/440' + '/' + zoom + '/' + normalizedCoord.x + '/' + normalizedCoord.y + '.jpg';
    },
    tileSize: new google.maps.Size(351, 234),
    maxZoom: 9,
    minZoom: 0,
    radius: 1738000,
    name: 'Cliff'
  });

  cliffMapType.projection = new MyProjection();

  map.mapTypes.set('cliff', cliffMapType);
  map.setMapTypeId('cliff');

  var marker = new google.maps.Marker({
    position: {
      lat: 0,
      lng: 0
    },
    map: map,
    title: 'Hello World!'
  });

  var m2 = new google.maps.Marker({
    position: {
      lat: 1,
      lng: 1*MAX
    },
    map: map,
    title: 'xchgf!'
  });

  var m3 = new google.maps.Marker({
    position: {
      lat: 1,
      lng: 351/234,
    },
    map: map,
    title: 'World edge'
  });

  var cityCircle = new google.maps.Circle({
    strokeColor: '#00FF00',
    strokeOpacity:...