JSFiddle - React, Tailwind, and code Playground

by Bhavik Bamania

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
function pixelToLatLng converts pixel offset into lat lng in map
<br><br>
x coordinate (0-400): <input id="coorx"/><br>
y coordinate (0-400): <input id="coory"/><br>
<button id="plotit">Plot It</button>
<div id="msg"></div>
<div id="map-canvas" style="width:400px; height:400px;"></div>

JavaScript

$(function() {
    var myLatlng = new google.maps.LatLng(38,-122);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
      };
    var map = new google.maps.Map($('#map-canvas')[0], mapOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
    });
    
    var pixelToLatlng = function(xcoor, ycoor) {
      var ne = map.getBounds().getNorthEast();
      var sw = map.getBounds().getSouthWest();
      var projection = map.getProjection();
      var topRight = projection.fromLatLngToPoint(ne);
      var bottomLeft = projection.fromLatLngToPoint(sw);
        
      var scale = Math.pow(2, map.getZoom());
      //var scale = 1 << map.getZoom();

      var newLatlng = projection.fromPointToLatLng(new google.maps.Point(xcoor / scale + bottomLeft.x, ycoor / scale + topRight.y));
      return newLatlng;
    };
    
    $("#plotit").click(function() {
        var newLatlng = pixelToLatlng($("#coorx").val(),$("#coory").val());
        marker.setPosition(newLatlng);
        $("#msg").html(newLatlng.lat() + ", " + newLatlng.lng());
    });
});