<script>
  var mapOpts = {
    center: new google.maps.LatLng(-42.8598, 171.8043),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOpts);
  var image_overlay = new OpacityControl(map, {
    opacity: 100,
    getTileUrl: function(coord, zoom) {
      // Restricting tiles to the small tile set we have in the example
      if (zoom == 13 && coord.x >= 8004 && coord.x <= 8006 && coord.y >= 3013 && coord.y <= 3015) {
        return "http://www.gavinharriss.com/codefiles/opacity-control/tiles/" + zoom + "-" + coord.x + "-" + coord.y + ".png";
      } else {
        return "http://www.gavinharriss.com/codefiles/opacity-control/tiles/blanktile.png";
      }
    },
  });
  var basemap_overlay = new OpacityControl(map, {
    opacity: 0.1,
    sliderImageUrl: "https://raruto.github.io/cdn/google-transparency/0.0.1/opacity-slider2.png",
    backgroundColor: "rgba(229, 227, 223, 0.9)",
    position: google.maps.ControlPosition.RIGHT_TOP
  }, );
</script>