Search code examples
javascriptreactjsreact-google-maps

Marker 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

enter image description here

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

Solution

  • 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