DurisGoogleMap.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-dark.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">

    <title>DurisMUD Google Map by Drevarr</title>
    

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBehtw9n4JkxthV2IDM_P13gI27k_ees3I&sensor=false">
    </script>
    
    <script type="text/javascript">
    //<![CDATA[
    var centreLat=0.0;
    var centreLon=0.0;
    var initialZoom=2;
    var imageWraps=true; //SET THIS TO false TO PREVENT THE IMAGE WRAPPING AROUND

    var map; //the GMap3 itself
    var gmicMapType;

    function GMICMapType() {
        this.Cache = Array();
        this.opacity = 1.0;
    }
    GMICMapType.prototype.tileSize = new google.maps.Size(256, 256);
    GMICMapType.prototype.maxZoom = 19;
    GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
        var c = Math.pow(2, zoom);
        var c = Math.pow(2, zoom);
        var tilex=coord.x,tiley=coord.y;
        if (imageWraps) {
		if (tilex<0) tilex=c+tilex%c;
        	if (tilex>=c) tilex=tilex%c;
        	if (tiley<0) tiley=c+tiley%c;
        	if (tiley>=c) tiley=tiley%c;
	}
	else {
		if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c))
		{
			var blank = ownerDocument.createElement('DIV');
			blank.style.width = this.tileSize.width + 'px';
			blank.style.height = this.tileSize.height + 'px';
			return blank;
		}
	}
	var img = ownerDocument.createElement('IMG');
        var d = tilex;
        var e = tiley;
        var f = "t";
        for (var g = 0; g < zoom; g++) {
            c /= 2;
            if (e < c) {
                if (d < c) { f += "q" }
                else { f += "r"; d -= c }
            }
            else {
                if (d < c) { f += "t"; e -= c }
                else { f += "s"; d -= c; e -= c }
            }
        }
        img.id = "t_" + f;
        img.style.width = this.tileSize.width + 'px';
        img.style.height = this.tileSize.height + 'px';
        img.src = "MapImages/"+f+".jpg";
        this.Cache.push(img);
        return img;
    }
    GMICMapType.prototype.realeaseTile = function(tile) {
        var idx = this.Cache.indexOf(tile);
        if(idx!=-1) this.Cache.splice(idx, 1);
        tile=null;
    }
    GMICMapType.prototype.name = "Duris Surface Map";
    GMICMapType.prototype.alt = "Duris: The Land of Bloodlust";
    GMICMapType.prototype.setOpacity = function(newOpacity) {
        this.opacity = newOpacity;
        for (var i = 0; i < this.Cache.length; i++) {
            this.Cache[i].style.opacity = newOpacity; //mozilla
            this.Cache[i].style.filter = "alpha(opacity=" + newOpacity * 100 + ")"; //ie
        }
    }

    function getWindowHeight() {
        if (window.self&&self.innerHeight) {
            return self.innerHeight;
        }
        if (document.documentElement&&document.documentElement.clientHeight) {
            return document.documentElement.clientHeight;
        }
        return 0;
    }

    function resizeMapDiv() {
        //Resize the height of the div containing the map.

        //Do not call any map methods here as the resize is called before the map is created.
        var d=document.getElementById("map");

        var offsetTop=0;
        for (var elem=d; elem!=null; elem=elem.offsetParent) {
            offsetTop+=elem.offsetTop;

        }
        var height=getWindowHeight()-offsetTop-16;

        if (height>=0) {
            d.style.height=height+"px";
        }
    }

    function load() {
        resizeMapDiv();
        var latlng = new google.maps.LatLng(centreLat, centreLon);
        var myOptions = {
            zoom: initialZoom,
            minZoom: 0,
            maxZoom: 5,
            center: latlng,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: true,
            mapTypeControlOptions: { mapTypeIds: ["ImageCutter"] },
	    mapTypeId: "ImageCutter"
        }
        map = new google.maps.Map(document.getElementById("map"), myOptions);
	gmicMapType = new GMICMapType();
        map.mapTypes.set("ImageCutter",gmicMapType);

/////////////////////////////////////////////////////////////////////////////////////
//Add any markers here e.g.
//      var marker = new google.maps.Marker({
//          map:map,
//          position: new google.maps.LatLng(x,y),
//          title: "My Marker"
//      });
/////////////////////////////////////////////////////////////////////////////////////
	google.maps.event.addListener(map, 'click', function(event) {
			addMarker(event.latLng);
	});
    
	function addMarker(location) {
		var marker = new google.maps.Marker({
		position: location,
		map: map
	});
	google.maps.event.addListener(marker, 'rightclick', function(event) {
		marker.setMap(null);
	});

	markers.push(marker);
	}

    }


    //]]>
    </script>
    
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47236641-3', 'auto');
  ga('send', 'pageview');

</script>

  </head>


  <body onresize="resizeMapDiv()" onload="load()">
    <header>
      <div class="container">
        <h1>Drevarr.GitHub.io</h1>
        <h2>a place to hold the tidbits I keep forgetting</h2>

        <section id="downloads">
          <a href="https://github.com/Drevarr" class="btn btn-github"><span class="icon"></span>View on GitHub</a>
        </section>
      </div>
    </header>

    <div class="container">
      <section id="main_content">
      <div style="text-align:center; max-width: 900px; overflow:auto; margin-left:auto; margin-right:auto;" id="map"></div>
      
      </section>
    </div>
  </body>

</html>