Overlaying an Image Map Type

by hoogw

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* 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;
}

JavaScript

function tile2long(x,z) {
  return (x/Math.pow(2,z)*360-180);
 }
 function tile2lat(y,z) {
  var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
  return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
 }



function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 38.907292, lng: -77.036420}
  });

 

  var imageMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
     
     
     //var tile_url = 'https://tile.openstreetmap.org/' +zoom+ '/' +coord.x + '/' +coord.y + '.png'
       
       
       	var x = coord.x;
        var y = coord.y;
        var z = zoom;

        var NW_long = tile2long(x,z);

        var SW_long = tile2long(x,z);
        var SW_lat =  tile2lat(y+1,z);

        var NE_long = tile2long(x+1,z);
        var NE_lat =  tile2lat(y,z);


        
       	var export_bbox = SW_long + ',' + SW_lat + ',' + NE_long + ',' + NE_lat;

				//console.log (export_bbox);

				//var url_param = '&bboxSR=&layers=&layerdefs=&size=&imageSR=&format=png&transparent=true&dpi=&time=&layerTimeOptions=&f=image&size=256,256';
        
        var url_param = '&format=png&size=256,256&transparent=true&f=image&bboxSR=4326&imageSR=4326';


//var url_layers = '&layers=show:341';
//var url_layers = '&layers=show:2';
var url_layers =''

//var root_url = 'https://maps2.dcgis.dc.gov/dcgis/rest/services/Zoning/MapServer/export?bbox=';

//var root_url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?bbox=';


var root_url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?bbox=';

var tile_url = root_url + export_bbox + url_param + url_layers;

       
       

      return  tile_url
    },
    tileSize: new google.maps.Size(256, 256)
  });

  map.overlayMapTypes.push(imageMapType);
  
  //map.overlayMapTypes[0].setOpacity(0.25);
  
 ...