JustFly1984 / react-google-maps-api

React Google Maps API
MIT License
1.78k stars 437 forks source link

Clusters are disappearing on page refresh #3162

Closed MattL-NZ closed 1 year ago

MattL-NZ commented 1 year ago

Please provide an explanation of the issue

I am able to render marker clusters on the screen using this package, however, when a page refresh occurs, all the markers along with the clusters disappear.

Your Environment

os: windows

node: 16.16.0

react version: 18 (Using Next.Js)

@react-google-maps/api version: Latest

How does it behave?

Markers show initial when changes are saved in the code but disappear when the browser is refreshed.

export default function Map() {
  const [setData, setSeedData] = useState(initialSeedData);
  const {isLoaded} = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
    libraries: ["places"],
  });

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

  return (
      <GoogleMap
          zoom={5}
          center={{lat: -36.899622, lng: 174.7928602}}
          mapContainerClassName="w-full h-full"
          options={defaultOptions}>

        <MarkerClusterer>
          {(clusterer) =>
              // @ts-ignore - While we figure out this error*
              setData.map((seed) => (
                  <MarkerF
                      key={seed.id}
                      position={{lat: seed.latitude, lng: seed.longitude}}
                      icon={{url: '/images/location-dot-solid.svg', scaledSize: new google.maps.Size(40, 40)}}
                      clusterer={clusterer}
                  />
              ))
          }
        </MarkerClusterer>
      </GoogleMap>
  )
}

After code save the browser shows this: image

After a browser refresh, everything disappears image

MattL-NZ commented 1 year ago

Looks like this may be an issue with this line: position={{lat: seed.latitude, lng: seed.longitude}} After changing the seed data to hold the location in it's own section seems to fix it.

Old

{
    "id": 7,
    "deviceName": "Device 7",
    "deviceNearestAddress": "420 Main South Road, Hornby, Christchurch 8042",
    "latitude: -43.5433874,
    "longitude: 172.5199757
}

New

{
    "id": 7,
    "deviceName": "Device 7",
    "deviceNearestAddress": "420 Main South Road, Hornby, Christchurch 8042",
    "location": {
      "lat": -43.5433874,
      "lng": 172.5199757
    }
}