ControlPosition not positioning where it should

[MauricioRobayo]

Hello!

I was testing the library with this simple component:

"use client";

import { APIProvider, ControlPosition, Map } from "@vis.gl/react-google-maps";

export default function GoogleMap() {
  const position = { lat: 53.54, lng: 10 };

  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ""}>
      <div className="aspect-video max-w-lg">
        <Map
          zoom={9}
          center={position}
          disableDefaultUI
          zoomControl
          zoomControlOptions={{
            position: ControlPosition.LEFT_TOP, // <----
          }}
        />
      </div>
    </APIProvider>
  );
}

but the zoom control is not being position at the LEFT_TOP:

If I use the same constant from google.maps.ControlPosition it works as expected. Although they both seem to point to 17, at runtime google.maps.ControlPosition seems to evaluate to 5:

"use client";

import { APIProvider, ControlPosition, Map } from "@vis.gl/react-google-maps";
import { useEffect, useState } from "react";

export default function GoogleMap() {
  const position = { lat: 53.54, lng: 10 };
  const [zoomControlPosition, setZoomControlPosition] = useState(
    ControlPosition.LEFT_TOP
  );

  useEffect(() => {
    setTimeout(() => {
      console.log("ControlPosition.LEFT_TOP:", ControlPosition.LEFT_TOP);
      console.log(
        "google.maps.ControlPosition.LEFT_TOP:",
        google.maps.ControlPosition.LEFT_TOP // <---- this logs 5 instead of 17
      );
      setZoomControlPosition(google.maps.ControlPosition.LEFT_TOP);
    }, 2000);
  }, []);

  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ""}>
      <div className="aspect-video max-w-lg">
        <Map
          zoom={9}
          center={position}
          disableDefaultUI
          zoomControl
          zoomControlOptions={{
            position: zoomControlPosition,
          }}
        />
      </div>
    </APIProvider>
  );
}

[usefulthink]

Oh, that is Interesting. There was just recently a change in the maps API regarding the control positions, where they added a bunch of new values for 'writing direction independent' positioning. I copied the values from the typescript definitions (@types/google.maps@3.54.7) but those are apparently incompatible with what the maps API is currently doing:

{
    "TOP_LEFT": 1,
    "TOP_CENTER": 2,
    "TOP": 2,
    "TOP_RIGHT": 3,
    "LEFT_CENTER": 4,
    "LEFT_TOP": 5,
    "LEFT": 5,
    "LEFT_BOTTOM": 6,
    "RIGHT_TOP": 7,
    "RIGHT": 7,
    "RIGHT_CENTER": 8,
    "RIGHT_BOTTOM": 9,
    "BOTTOM_LEFT": 10,
    "BOTTOM_CENTER": 11,
    "BOTTOM": 11,
    "BOTTOM_RIGHT": 12,
    "CENTER": 13,
    "BLOCK_START_INLINE_START": 14,
    "BLOCK_START_INLINE_CENTER": 15,
    "BLOCK_START_INLINE_END": 16,
    "INLINE_START_BLOCK_CENTER": 17,
    "INLINE_START_BLOCK_START": 18,
    "INLINE_START_BLOCK_END": 19,
    "INLINE_END_BLOCK_START": 20,
    "INLINE_END_BLOCK_CENTER": 21,
    "INLINE_END_BLOCK_END": 22,
    "BLOCK_END_INLINE_START": 23,
    "BLOCK_END_INLINE_CENTER": 24,
    "BLOCK_END_INLINE_END": 25
}

This actually makes a lot of sense, since that appears to be a backwards-copatible change (other than what we could see in the typescript definitions).

Can you open a PR with the correct values?