Converting current pixels into coordinates based on current position

[teengineer]

Hello,
I have some pixels and i want to convert these to coordinates but when i use map.getProjection().fromPointToLatLng() func. , it convert to coordinates based on all google maps image not current position, how can i convert this pixels to coordinates based on current map position?

predictions : predictions 
Array(3) [ (11) […], (11) […], (11) […] ]
​
0: Array(11) [ {…}, {…}, {…}, … ]
0: Object { x: 356, y: 238 }
1: Object { x: 419, y: 241 }
2: Object { x: 430, y: 309 }
3: Object { x: 415, y: 327 }
4: Object { x: 410, y: 363 }
5: Object { x: 423, y: 388 }
6: Object { x: 425, y: 433 }
7: Object { x: 367, y: 445 }
8: Object { x: 287, y: 445 }
9: Object { x: 277, y: 250 }
10: Object { x: 350, y: 238 

// Draw polygons when predictions change
useEffect(() => {
  if (predictions.length === 0 || !map) return;

  predictions.forEach((prediction) => {
    const edgeCoordinates = prediction.map((point) => {
      const latLng = map.getProjection()!.fromPointToLatLng(new google.maps.Point(point.x, point.y));
      return { lat: latLng?.lat(), lng: latLng?.lng() };
    });
    drawPolygon([edgeCoordinates]);
  });

}, [predictions, map]);

[usefulthink]

May I ask where those prediction-objects are coming from? And what coordinate system are they specified in? Is that a position within the map-div? It seems very weird to me to receive something like that, but not the geo-coordinates along with it.

Whatever that may be, I see basically two ways to do something like that:

• get the coordinates of the top-left and bottom-right corners of your map and convert them to the 'point' coordinate system. That should give you all you need to convert the coordinates you have into the coordinates needed for the fromPointToLatLng() conversion.
• create a google.maps.OverlayView and add it to the map. In the draw-function of that overlay you will then have access to the more capable google.maps.MapCanvasProjection interface that allows you to run those computations. A simple example for that would be roughly like this:

const map = useMap();
const [projection, setProjection] = useState<google.maps.MapCanvasProjection>();

useEffect(() => {
  if (!map) return;

  const overlay = new google.map.OverlayView();
  // not sure if these two have to be provided, maybe works fine without them..
  overlay.onAdd = () => {};
  overlay.onRemove = () => {};
  overlay.draw = () => {
    // I'm assuming this will always return the same projection instance, might not be the case...
    const proj = overlay.getProjection();
    if (proj !== projection) setProjection(proj);
  };

  overlay.setMap(map);

  return () => {
    overlay.setMap(null);
    setOverlay(null);
  }
}, [map]);

useEffect(() => {
  if (!projection) return;

  // now you have the projection interface available and can use e.g. [`projection.fromDivPixelToLatLng()`](https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapCanvasProjection.fromDivPixelToLatLng)
}, [projection]);

[teengineer]

Thank you for responding.
I am using yolov8 to detect roof and then i draw the borders of roofs on maps. I solved my problem,
By the way i didnt know this google.maps.MapCanvasProjection
Thank you very much

[usefulthink]

Oh that indeed makes a lot of sense. Thanks for the reply!