overlay map image tile opacity

google tile number 

http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/




https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

knowing zoom level, and  google tile coordinate x,  google tile coordinate y
calculate the image bounding bbox


//  this is north east long
function tile2long(x,z) {
  return (x/Math.pow(2,z)*360-180);
 }

// this is north east lat
 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))));
 }


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;
       
         var url_param = '&format=png&size=256,256&transparent=true&f=image&bboxSR=4326&imageSR=4326';
       
       
var url_layers =''
       
       
        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;



*******************************************************************************


This is my working code:


[jsfiddle sample of google image map type overlay][1]

[jsfiddle another sample of google overlay image][2]

    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))));

    }





     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;

       

         var url_param = '&format=png&size=256,256&transparent=true&f=image&bboxSR=4326&imageSR=4326';

       

       

       var url_layers =''

       

       

           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;



 
[maptiler get bbox from coodinate number and zoom][3]


[how to calculate google coordinate number zoom, convert, lat long etc....][4]


  [1]: https://jsfiddle.net/hoogw/wnazxskp/1/
  [2]: https://jsfiddle.net/hoogw/wdLfchq2/1/
  [3]: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
  [4]: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames


**************************************************************


my working sample

https://jsfiddle.net/hoogw/dtL147w2/1/

https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

https://jsfiddle.net/hoogw/m94qy82z/






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



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

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


// insertAt or push ?????

 map.overlayMapTypes.insertAt(
            0, new CoordMapType(new google.maps.Size(256, 256)));

  map.overlayMapTypes.push(imageMapType);

   // for old api
  //map.overlayMapTypes[0].setOpacity(0.25);


 // 3.28 api 2017
  map.overlayMapTypes.getAt(0).setOpacity(0.5);
}





https://jsfiddle.net/hoogw/m94qy82z/