0
907
ViewsMarker not showing @react-google-maps/api on localhost next.js
I'm aware there are similar questions to this... but nothing has answered my question
I'm trying to add a marker to my google map but it is not showing up when I'm running the project locally (It works fine when on my live site)
Heres my component
import { React, useMemo } from "react";
import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api";
import MapContainerStyles from "./styles/MapContainerStyles";
const Map = () => {
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: API_KEY,
});
const center = useMemo(() => ({ lat: -30.292038, lng: 153.118896 }), []);
const onLoad = (marker) => {
console.log("marker: ", marker);
};
const options = {
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
};
if (!isLoaded) return <div>Loading...</div>;
return (
<GoogleMap zoom={15} options={options} center={center} mapContainerClassName="map-container">
<Marker onLoad={onLoad} position={center} />
</GoogleMap>
);
};
export default Map;
The console logs for the markers onLoad return the following
There are no errors in the console
I've looked at multiple resources and it appears as if I am doing everything correctly.. but the marker is just not showing
any help would be appreciated
3 answers
Answer question0
The problem that you're having is something introduced by React 18 related to Strict Mode. If you remove Strict Mode from your app, the markers should appear. That also explains why Smokey Dawson's app worked in production — I'm guessing they removed Strict Mode.
Here's a little documentation about it in a closed issue from the repo: https://github.com/JustFly1984/react-google-maps-api/issues/2978
Hopefully you already resolved this, but if not, I figured I'd answer it since I ran into the same problem this week.
0
I had the same issue when using @react-google-maps/api@2.10.2
To solve the problem I downgraded to @react-google-maps/api@2.7.0
0
This is how I implemented it:
It might be because you did not specify the position prop, which most times takes the same coordinates as the center coordinates.
const markerCoors = {
lat: x,
lng: y,
};