Map Marker don't show up (Marker rendered before Map)- ReactJS with @react-google-maps/api


What I want:

Having a Default ReactJS App with a Google Map


Marker don’t display

Possible reason:

Marker been added before map finish load.


App.js, (Default ReactJS file)

Map.js, (Customized ReactJS Component)



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

import React from "react";
import "./style/map.css";

const Map = ({ zoomLevel, map_lat, map_lng, mark_lat, mark_lng }) => {
  const center = { lat: map_lat, lng: map_lng };

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "---USE API KEY HERE---",

  //Return maps
  if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
        onLoad={() => {
          console.log("Map is loaded!");
        {/* Debug Purpose */}
        {console.warn("Marker been added!")}

        {/* Add Marker */}
        <Marker position={{ lat: mark_lat, lng: mark_lng }} />

Map.defaultProps = {
  zoomLevel: 14,
  map_lat: 50,
  map_lng: -100,
  mark_lat: 50,
  mark_lng: -100,

export default Map;

Extra Information:

As you may noticed, I have console log and warn to tell the order of render, from my understanding,

Marker seems been added before Map fully loaded.

Debug Result: Marker been added before Map onLoad been called.

And I do managed render the marker on the map manually (local host):

  1. delete the Marker in run time and save changes, (So let the Map finish load first.)

  2. add Marker. (Map is already finished loading)

And now I got the marker, but it will not be here next time.

Manually Add Marker After Map Rendered, The Marker appear.


I Finally Rendered my marker on the webpage.

In case you facing the same problem, here is example code from Installation documentation of the @react-google-maps/api:

Don’t ask me what is the problem or any detail, because I don’t know either.

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

const containerStyle = {
  width: '400px',
  height: '400px'

const center = {
  lat: -3.745,
  lng: -38.523

function MyComponent() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "YOUR_API_KEY"

  const [map, setMap] = React.useState(null)

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new;
  }, [])

  const onUnmount = React.useCallback(function callback(map) {
  }, [])

  return isLoaded ? (
        { /* Child components, such as markers, info windows, etc. */ }
  ) : <></>

export default React.memo(MyComponent)

Answered By – Yanze-Sun-Li

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published