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

@SurajRegmi It seems to only happen on localhost - Once I put my app live the marker appeared — Smokey Dawson, May 05 '22 at 06:19
@SmokeyDawson I'm facing the same issue, still no luck on localhost? you sure that it's fine on build? — Ash Archin, May 11 '22 at 15:13
@AshArchin It definitely works for me on my site, but I can't say for certain if it will work for you. Best thing would be to upload your site somewhere and have a look. — Smokey Dawson, May 12 '22 at 22:36

ouriel ohayon · Accepted Answer · 2022-08-18T09:15:03.740

100

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

edited Aug 18 '22 at 09:15

answered Jul 26 '22 at 17:18

ouriel ohayon

1,016
1
5
5

2

For the sake of completeness: You then must also replace your html tags with – AirLancer Aug 14 '22 at 11:48
yes , of course – ouriel ohayon Aug 18 '22 at 09:13
1

for those having problems with OverlayView, its the same thing, you just import OverlayViewF if using react18+ – Oliver Watkins Mar 08 '23 at 17:29
1

Nice thx! Just asking myself wt* was this mentioned in the docs? – lortschi Jul 05 '23 at 11:51

score 12 · Answer 2 · answered May 25 '22 at 01:47

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.

I was hitting the same problem, and removing `reactStrictMode: true` from my `next.config.js` fixed the issue for me. — Leland Reardon, Feb 25 '23 at 03:24

score 0 · Answer 3 · edited May 12 '22 at 22:37

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

edited May 12 '22 at 22:37

Smokey Dawson

8,827
19
77
152

answered May 09 '22 at 16:36

Andrei Topala

1

score 0 · Answer 4 · answered Aug 26 '22 at 05:11

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.

Fra · Answer 5 · 2022-05-04T12:38:48.593

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

edited May 04 '22 at 12:38

answered May 04 '22 at 12:29

Fra

62
6

score -2 · Answer 6 · answered Mar 03 '23 at 13:50

-2

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

answered Mar 03 '23 at 13:50

salorsino

9
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 08 '23 at 08:39

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

6 Answers6

Linked