Search code examples
reactjsgoogle-mapsreact-google-maps-api

@react-google-maps/api Google maps Marker not showing react JS

Anyone can help? My map is being rendered and working perfectly but my marker is not working I have been fighting with this for 4 hours.

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

    function Map({ lati, longi }) {
      const position = {
        // lat: lati,
        // lng: longi,
        lat: 33.7295198,
        lng: 73.0371536,
      };

      const onLoad = (marker) => {
        console.log("marker: ", marker);
      };

      return (
        <>
          <GoogleMap
            zoom={18}
            center={{ lat: lati, lng: longi }}
            mapContainerClassName="map-container"
          >
            <Marker onLoad={onLoad} position={position} />
          </GoogleMap>
        </>
      );
    }

    export default Map;
Solution

  • Try

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


<MarkerF />