google-map-react populate multiple markers

Question

I am currently trying to populate my google map with markers by using the map function. I can't seem to get anything to populate. Are there limitations that I am not understanding or am I missing something? I tried replacing FontAwesomeIcon with something more simple but it doesn't render. If you copy paste FontAwesomeIcon multiple times within the GoogleMapReact component it seems to work but I can't seem to make it work with map. Any suggestions would be much appreciated.

render() {
        const {center, zoom} = this.props;

        const listingPins = this.props.testList.map((listing, index) => {
            console.log(listing);
            if (listing.coordinates.lat === null || listing.coordinates.lng === null){
                return null
            } else{
                return <FontAwesomeIcon icon={faHome} size={"2x"} key={index} listing={listing} lat={listing.coordinates.lat} lng={listing.coordinates.lat} />
            }
        });
        console.log("TEST");
        console.log(listingPins);

        return (
            <div style={{ height: '100vh', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "key" }}
                    center={center}
                    zoom={zoom}
                >
                    {listingPins}
                </GoogleMapReact>
            </div>
        );
    }

score 0 · Answer 1 · answered Nov 09 '19 at 03:49

0

To show multiple markers on map, you have to pass an array of markers to the GoogleMapReact component as a child and map over it.

return (
        <div style={{ height: '100vh', width: '100%' }}>
          <GoogleMapReact>
             {props.listingPins.map(pin => (
               <Marker
                  position={{ lat: pin.latitude, lng: pin.longitude }}
                  key={pin.id}
               />
             ))}
          </GoogleMapReact>
        </div>
     );

answered Nov 09 '19 at 03:49

Thilina Koggalage

1,044
8
16

Doesn't seem to work.. Still shows an empty map. Not sure what's wrong because if I print out the markers it seems to have the correct information. – justinseo Nov 10 '19 at 22:16

score 0 · Answer 2 · answered Nov 27 '19 at 18:08

const createMarker = ({ map, maps }: Mapprops) => {
    const markers = props.listingPins.map(data => {
      return new maps.Marker({ position: data });
    });
  };
<GoogleMapReact
   bootstrapURLKeys={{ key: "key" }}
   center={center}
   zoom={zoom}
   onGoogleApiLoaded={createMarker}
   >
</GoogleMapReact>

This would create the markers for you.

You need to make sure that the data object is in following format :

data: {
    lat: number
    lng: number
    }

google-map-react populate multiple markers

2 Answers2