React Google Maps Api doesn't render children elements at first render

Question

I'm trying to use Google Maps Api in my app, everything is fine until I want to display a Marker at the first render of the map. The Marker is not showing up, but if I add one more Marker after the render is done, the Marker will appear.

So the problem is that I want to render the map with a Marker already there, I don't want to wait for some location to be selected.

I want to receive lat and lng from props, but for now I've made an hard coded const (center).

import React, { useMemo } from "react";
import { useJsApiLoader, GoogleMap, Marker } from "@react-google-maps/api";

export default function GoogleMaps({ lat, lng }) {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  });

  const center = useMemo(() => ({ lat: 42.4332, lng: 20.4343 }), []);

  if (!isLoaded) {
    return <h2>Calculating Locations..</h2>;
  }

  return (
    isLoaded && (
      <GoogleMap
        center={center}
        zoom={17}
        mapContainerStyle={{ width: "450px", height: "400px" }}
        options={{ disableDefaultUI: true, mapId: "deleted for this snippet" }}
      >
        <Marker position={center} />
      </GoogleMap>
    )
  );
}

DavidCastefa · Accepted Answer · 2022-09-20 08:26:47Z

0

Have you tried importing and using MarkerF instead of Marker?

See: https://github.com/JustFly1984/react-google-maps-api/issues/3048#issuecomment-1166410403

"MarkerF is functional component vs class based Marker component, which does not work with react Strict and/or react@17+"

Also, there are similar issues discussed here: Markers not rendering using @react-google-maps/api and here: Map Marker don't show up (Marker rendered before Map)- ReactJS with @react-google-maps/api

edited Sep 20, 2022 at 8:26

answered Sep 19, 2022 at 7:37

DavidCastefa

315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marco Moretti · Accepted Answer · 2024-06-07 23:10:22Z

For everyone struggling with this, it was the damn react Strict

When I changed my code from this

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
if (rootElement) {
  const root = createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
   </React.StrictMode>
  );
} else {
  console.error("Root element not found");
}

to this

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
if (rootElement) {
  const root = createRoot(rootElement);
  root.render(<App />);
} else {
  console.error("Root element not found");
}

Everything worked like a charm. I would have never checked if it wasn't for DavidCastefa, thanks mate.

Collectives™ on Stack Overflow

React Google Maps Api doesn't render children elements at first render

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related