CODEWITHSUNDEEP
reactjsgoogle-maps
Joak
Joak

Reputation: 45

Google Maps React, adding markers with lat lng

Im using "google-maps-react" and trying to add new markers to my map with clicks.

I currently manage to console log the specific latLng, but cant seem to make a new one. I'm pretty new to React.

My onMapClick works with finding the latitude and longitude. But I think I need to add the position to an array and then use that one to update the map. Might be wrong

  onMapClick = (map,maps,e) => { 
    const { latLng } = e; 
    const latitude = e.latLng.lat(); 
    const longitude = e.latLng.lng(); 
    console.log(latitude + ", " + longitude);  

    var marker = new window.google.maps.Marker({
      position: e.latLng,
      setMap: map,
    });
  }

The solution Im currently on is that I just hardcoded some Markers in my render() with the location of array in Marker

   <Marker
      onClick={this.onMarkerClick}
      name={storedLocations[0]}
      position={{lat:listLatitude[0], lan:listLongitude[0]}}
    />

My InfoWindow is: 

<InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
       onClose={this.onClose}
     >
      <div>
        <h4>{this.state.selectedPlace.name}</h4>
      </div>
    </InfoWindow>
  </Map>

Upvotes: 2

Views: 9973

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59318

My onMapClick works with finding the latitude and longitude. But I think I need to add the position to an array and then use that one to update the map.

That's indeed would the React way but instead of instantiating markers via Google Maps API, consider to keep the data (marker locations) via state and React will do the rest like this:

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      locations: []
    };
    this.handleMapClick = this.handleMapClick.bind(this);
  }

  handleMapClick = (ref, map, ev) => {
    const location = ev.latLng;
    this.setState(prevState => ({
      locations: [...prevState.locations, location]
    }));
    map.panTo(location);
  };

  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onClick={this.handleMapClick}
        >
          {this.state.locations.map((location, i) => {
            return (
              <Marker
                key={i}
                position={{ lat: location.lat(), lng: location.lng() }}
              />
            );
          })}
        </Map>
      </div>
    );
  }
}

Explanation:

  • locations state is used to track all the locations once the map is clicked

  • locations state is passed to Marker component to render markers

The next step could be to introduce a separate component for markers list, Thinking in React tells about components the follows:

One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

const MarkersList = props => {
  const { locations, ...markerProps } = props;
  return (
    <span>
      {locations.map((location, i) => {
        return (
          <Marker
            key={i}
            {...markerProps}
            position={{ lat: location.lat(), lng: location.lng() }}
          />
        );
      })}
    </span>
  );
};

Here is a demo which demonstrates how to add a makers on map click via google-maps-react library

Upvotes: 5

Related Questions