How to load multiple markers on map react-google-maps

Question

Been stuck with this one in quite a while. Please give me a hand with solving it. Trying to load multiple markers on the map but for some reason it doesn't load all of them. I'm using React with the Google Maps Api wrapper by tomchentw https://tomchentw.github.io/react-google-maps/#introduction

It loads the first marker only with no errors showing at all. I think it may be something with the iteration of the markers but can't seem to find the flaw..

.App

render() {
return (
  <div>
    <Map
      center={{ lat: 40.6451594, lng: -74.0850826 }}
      zoom={10}
      city={[places]}
    />

  </div>
);
}

.Map

import React from 'react';
import { withGoogleMap, GoogleMap, withScriptjs, Marker, InfoWindow } from "react-google-maps";
import { compose, withProps, withStateHandlers } from 'recompose';

const MapWithPlaces = compose(
withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: '100vh', width: '100%' }} />,
    mapElement: <div style={{ height: '100%' }} />,
}),
withStateHandlers(() => ({
    isOpen: false,
}), {
        onToggleOpen: ({ isOpen }) => () => ({
            isOpen: !isOpen,
        })
    }),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
    defaultZoom={props.zoom}
    defaultCenter={props.center}
    defaultOptions={{ ... }}>
    {props.places && props.places.map((place, i) => {
        let lat = parseFloat(place[i].latitude, 10);
        let lng = parseFloat(place[i].longitude, 10)

        return (
            <Marker
                id={place[i].id}
                key={place[i].id}
                position={{ lat: lat, lng: lng }}
                title="Click to zoom"
                onClick={() => { props.onToggleOpen({ i }); }}
            >
                {props.isOpen[{ i }] &&

                    <InfoWindow onCloseClick={props.onToggleOpen({ i })}>
                        <div>
                            {place.name}
                        </div>
                    </InfoWindow>
                }
            </Marker>
        )
    })}

</GoogleMap>
);

const customStyled = require('../mapStyle.json');

export default MapWithPlaces;

.place.json

[
{
    "id": 1,
    "name": "Park Slope",
    "latitude": "40.6710729",
    "longitude": "-73.9988001"
},
{
    "id": 2,
    "name": "Bushwick",
    "latitude": "40.6942861",
    "longitude": "-73.9389312"
},
{
    "id": 3,
    "name": "East New York",
    "latitude": "40.6577799",
    "longitude": "-73.9147716"
},
]

Thank you in advance.

Not all of them? So which are loading and which are not? What have you tried to debug your application? What errors are showing? etc. in its current state, your question is too broad and unlikely to find an answer. — MrUpsidown
– MrUpsidown, Commented Oct 4, 2018 at 13:19
Well only the first marker is loading and there are no errors.. that's why its so difficult.. and I'm quite new with React — Babadzhanov
– Babadzhanov, Commented Oct 4, 2018 at 13:59

Vadim Gremyachev · Accepted Answer · 2018-10-07 20:25:19Z

4

There are a a few issues with binding places property

<Map
      center={{ lat: 40.6451594, lng: -74.0850826 }}
      zoom={10}
      city={[places]}
      ^^^^^^^^^^^^^^
    />

1) seems to be a typo, you probably meant places property name instead of city, right?

2) and another point that {[places]} expression evaluates places property to a nested array (that's the reason why the marker is getting rendered only once):

[
    [
        {
            "id": 1,
            "name": "Park Slope",
            "latitude": "40.6710729",
            "longitude": "-73.9988001"
        },
        {
            "id": 2,
            "name": "Bushwick",
            "latitude": "40.6942861",
            "longitude": "-73.9389312"
        },
        {
            "id": 3,
            "name": "East New York",
            "latitude": "40.6577799",
            "longitude": "-73.9147716"
        }
    ]
]

With a few changes here is a working demo.

edited Oct 7, 2018 at 20:25

answered Oct 7, 2018 at 20:11

Vadim Gremyachev

59.6k21 gold badges139 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Babadzhanov Over a year ago

Thanks for the help mate, I just saw it now! Let me check

Babadzhanov Over a year ago

Perfect! You are awesome dude, you made my day! Cheeers!!

Collectives™ on Stack Overflow

How to load multiple markers on map react-google-maps

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related