css-scaled google maps click incorrect coordinates

Question

I have a Google Maps map inserted in a css-scaled container. Due to project specifics this cannot be avoided. I need to track clicks coords on this map, but being scaled map set

Answer 1

I also had this issue and the above solutions didn't work for me because:

• @Terion's "point2LatLng" function didn't seem to place the marker in the correct location
• @Terion's use of a virtual iframe meant that you can't drag the map, which severely restricted the user experience.

However I did find a way to do it: I put the map div inside a container which I effectively un-scaled with this JS, loaded after all other JS:

//Function: Unscale the map Container
function unscaleMap(scale){
    var unscale = Math.round(10000/(scale * 1))/10000,
        rescale = Math.round(10000 * (100 / unscale))/10000;
    document.getElementById("fs_mapContainer").style.transform = "scale("+unscale+")";
    document.getElementById("fs_mapContainer").style.width = rescale + "%";
    document.getElementById("fs_mapContainer").style.height = 80 * scale + "vh";
}

And CSS:

.map_container {position: relative; transform-origin: 0 0; box-sizing: border-box;}
#map {width: 100%; height: 100%}