Marker not showing @react-google-maps/api on localhost next.js

Question

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

Answer 1

for react 18+ you have to import MarkerF instead of Marker and use in it as a tag(of course)

import {MarkerF} from '@react-google-maps/api'

Source

Answer 2

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,
  };

Answer 3

I had the same issue when using @react-google-maps/[email protected]

To solve the problem I downgraded to @react-google-maps/[email protected]

Answer 4

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.

Answer 5

Additionally to importing MarkerF, you will want to remove reactStrictMode: true from your next.config.js file.

Answer 6

You have to change your Marker html Element to MarkerF, and change your import to MarkerF as well. After that it should work. I had this same issue, and oddly enough I had it working for about a day with just Marker and out of the blue nextJS decided it didn't like that anymore and I banged my head against the wall until I found this out. Also I can't comment on Strict mode having any effect on it, I didn't test out removing strict mode. It's worth a shot though.