0

I have a simple piece of code here where I display a google map using @react-google-maps/api.

I am attempting to display a "Marker" and an "OverlayView" in the center of the map at the same coords as the map center. (A marker is just the default map markers, whereas OverlayView can be a custom HTML component where I want to eventually put buttons for callback actions).

const MyMapExample = () => {

    let coords = { lat: 48, lng: 11 }

    const { isLoaded } = useLoadScript({
        googleMapsApiKey: getApiKey() as string,
        libraries: ['places'],
    });

    if (!isLoaded) {
        return <p>Loading...</p>;
    }

    return (
        <div>
            <GoogleMap
                options={{
                    disableDefaultUI: false,
                    clickableIcons: true,
                    scrollwheel: true,
                }}
                zoom={12}
                center={coords}
                mapTypeId={google.maps.MapTypeId.ROADMAP}
                mapContainerStyle={{ width: '800px', height: '800px' }}
                onLoad={() => console.log('Map Component Loaded...')}
            >
                <OverlayView
                    position={coords}
                    mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
                >
                    <div>   This is my Custom Marker !!!!!!</div>
                </OverlayView>

                <Marker position={coords} />
            </GoogleMap>
        </div>
    );
};

Unfortunately there is some kind of refresh/asynch issue with this code because the Marker and OverlayView mostly do not show. Sometimes they do show, but mostly they don't. If I duplicate the markers then, more often than not, they DO show. But for the most part the Map is empty.

How do I get my markers to show in my React App?

UPDATE

I have a code pen here :

https://codesandbox.io/s/mapexample-ro99ep

Unfortunately for me, it works perfectly fine in the codesandbox pen that I have pasted here. But if I run it locally in my CRA I get the problem as described in my question. It has something to do with the order of JS being executed... or something.

Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225

1 Answers1

0

I figured out with help from this question Marker not showing @react-google-maps/api on localhost next.js

Importing OverlayViewF instead of OverlayView and MarkerF instead of Marker solved this problem.

import {useLoadScript, GoogleMap,  MarkerF, OverlayView, OverlayViewF} from '@react-google-maps/api';
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
  • 1
    Too bad that components with an F in the end is not documented. But I read before where you should use it if you're using the latest version of React. I think it would be React ver18. And the reason that your code is working in codesandbox is because it downgrades to the previous version if you still use ReactDOM.render. `Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot`. The console says this. – Yrll Mar 08 '23 at 23:36