Closed
Description
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>
);
}