Markers not displaying when mapped from an array #3075

MattHeslington · 2022-08-04T11:49:28Z

MattHeslington
Aug 4, 2022

Hi,

Love this package- I just have a quick question. I can't understand or work out why when I try to map icons from an array they don't display. Rendering a single Marker works fine (see the commented out Marker). The thing is, sometimes the mapped icons do display, I think due to a hot-reload, but if I reload the page to confirm, the icons are again not visible.

Here's the code:

import { useMemo } from 'react'
import { GoogleMap, useLoadScript, Marker } from '@react-google-maps/api'

const entries = [
    {
        _id: 'K0-6kUEiDEuroLH_FJfrW',
        price: 499,
        coords: { lat: 8.0187778, lng: 98.290228 },
    },
    {
        _id: 'NH3ZdxVEVEQfh2OCGTuJl',
        price: 700,
        coords: { lat: 7.838705, lng: 98.2902583 },
    },
    {
        _id: 'Xl60a5XeLcg7zEy4sejc2',
        price: 467,
        coords: { lat: 9.47126, lng: 100.0439603 },
    },
    {
        _id: '3gF7MmCkws15bRQNnfNji',
        price: 398,
        coords: { lat: 9.57589, lng: 99.9842243 },
    },
    {
        _id: 'uYGVwjGuvoNOKV2KvGvB8',
        price: 900,
        coords: { lat: 9.554308, lng: 100.0744273 },
    },
]

const MapTwo = () => {
    const { isLoaded } = useLoadScript({
        googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS,
    })
    const center = useMemo(() => ({ lat: 8.763107, lng: 99.0806033 }), [])
    if (!isLoaded) return <div>Loading...</div>

    return (
        <GoogleMap zoom={9} center={center} mapContainerClassName='map-container'>
            {entries && entries.map((entry, i) => <Marker key={i} position={entry.coords} />)}
            {/* <Marker position={{ lat: 9.57589, lng: 99.9842243 }} /> */}
        </GoogleMap>
    )
}

export default MapTwo

Any help would be very much appreciated.
Cheers, Matt