What I want:
Having a Default ReactJS App with a Google Map
Problem:
Marker don't display
Possible reason:
Marker been added before map finish load.
Files:
App.js, (Default ReactJS file)
Map.js, (Customized ReactJS Component)
./style/map.css
Map.js:
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 (
<GoogleMap
mapContainerClassName="map-container"
zoom={zoomLevel}
center={center}
onLoad={() => {
console.log("Map is loaded!");
}}
>
{/* Debug Purpose */}
{console.warn("Marker been added!")}
{/* Add Marker */}
<Marker position={{ lat: mark_lat, lng: mark_lng }} />
</GoogleMap>
);
}
};
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):
delete the Marker in run time and save changes, (So let the Map finish load first.)
add Marker. (Map is already finished loading)
And now I got the marker, but it will not be here next time.
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 window.google.maps.LatLngBounds(center);
map.fitBounds(bounds);
setMap(map)
}, [])
const onUnmount = React.useCallback(function callback(map) {
setMap(null)
}, [])
return isLoaded ? (
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
>
{ /* Child components, such as markers, info windows, etc. */ }
<></>
</GoogleMap>
) : <></>
}
export default React.memo(MyComponent)