javascriptreactjsgoogle-mapsgoogle-maps-react

How to get all markers in google-maps-react


I have the google-maps-react in my project, but I don't know how to get all markers from the map?

import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import "../Body/Map.css";
import marker_icon from "../../img/marker_icon.png";
import hover_icon from "../../img/hover_icon.png";
import { Grid, Row, Col } from "react-bootstrap";
/*global google*/

export class MapContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    };
  }

  onMarkerClick = (props, marker, e) => {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  };

  onMapClicked = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  addMarker = (mapProps, map) => {
    var marker = new google.maps.Marker({
      position: {},
      map: map
    });
  };

  render() {
    const google = window.google;
    const data = this.props.data;

    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={1}
          onClick={this.onMapClicked}
          onReady={this.addMarker}
        >
          {data.map(item => (
            <Marker
              key={item.id}
              title={item.name}
              name={item.name}
              position={{ lat: item.lat, lng: item.lng }}
              onClick={this.onMarkerClick}
            />
          ))}
          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div className="info">
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "AIzaSyDLgdweTnvhPnUE5yzdxcMeK876cFtMaSk"
})(MapContainer);

Solution

  • You probably meant to access google.maps.Marker objects, if so, you could consider the utilize Callback Refs:

    1) assign ref attribute to store a reference to a Marker node:

    <Marker  ref={this.onMarkerMounted}
          key={item.id}
          title={item.name}
          name={item.name}
          position={{ lat: item.lat, lng: item.lng }}
    />  
    

    2) save marker instance into markerObjects array:

    export class MapContainer extends Component {
      constructor(props) {
        super(props);
        this.state = {
          markerObjects: []
        };
    
    
        this.onMarkerMounted = element => {
          this.setState(prevState => ({
            markerObjects: [...prevState.markerObjects, element.marker]
          }))
        };
      }
    
      render() {
        const google = window.google;
        const data = this.props.data;
    
        return (
          <div className="map-container">
            <Map
              google={this.props.google}
              className={"map"}
              zoom={4}
              defaultCenter={{ lat: -35.0317893, lng: 125.219989 }}
              position={{ lat: -35.0317893, lng: 125.219989 }}
            >
              {data.map(item => (
                <Marker ref={this.onMarkerMounted}
                  key={item.id}
                  title={item.name}
                  name={item.name}
                  position={{ lat: item.lat, lng: item.lng }}
                />
              ))}
            </Map>
          </div>
        );
      }
    }