I am currently trying to overlay an image on google maps. By far, I was successful in getting that image on the google maps but it wasn't on the correct position.

I have co-ordinates (lat-longs) of the image where I want it to be overlaid on the map.

I tried to place it using the google map tiles methodology. For it to be displayed as tile I named it "image_name_zoom_x_y.png". So when you select a specific zoom level ( I used 18 ) the image is displayed on a tile but it is displayed on wrong location (tile).

How to match the tile's x, y co-ordinates with the image's latitude and longitude so that I would be able to place the image on the correct location?

This is where I got so far:

const TILE_URL = 'xyz.com/orthoImage_{z}_{x}_{y}.png';

const imageMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        console.log(coord);
        const url = TILE_URL
            .replace('{z}', zoom)
            .replace('{x}', coord.x)
            .replace('{y}', coord.y);
        console.log('url', url);
        return url;
    },
    tileSize: new google.maps.Size(256, 256),
    minZoom: 1,
    maxZoom: 20
});