A toggle button on and off for markers in google maps react

Question

I want to create button that removes all markers for the google maps react, i already have it working for the heatmap but it does not let me do the same strategy for the markers ? is it because the mapping that is being done ? than you i already set up all the other functions and states just one last step

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker, HeatMap } from 'google-maps-react';
import { connect } from 'react-redux';


const mapStyles = {
    width: '45%',
    height: '54%'
};
const h4style = {
    color: "black"
  };


export class MapContainer extends Component{

    state = {
        showingInfoWindow: false,  //Hides or the shows the infoWindow
        activeMarker: {},          //Shows the active marker upon click
        selectedPlace: {},
        isHeatVisible : true ,  
        isMarkerVisible: true       //Shows the infoWindow to the selected place upon a marker
    };
    handleToggle1 = () => {
        this.setState({isMarkerVisible: !this.state.isMarkerVisible})
      }
    handleToggle = () => {
        this.setState({isHeatVisible: !this.state.isHeatVisible});
      }
    onMarkerClick = (props, marker, e) =>
        this.setState({
            selectedPlace: props,
            activeMarker: marker,
            showingInfoWindow: true
        });

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

            const gradient = [
                "rgba(0, 255, 255, 0)",
                "rgba(0, 255, 255, 1)",
                "rgba(0, 191, 255, 1)",
                "rgba(0, 127, 255, 1)",
                "rgba(0, 63, 255, 1)",
                "rgba(0, 0, 255, 1)",
                "rgba(0, 0, 223, 1)",
                "rgba(0, 0, 191, 1)",
                "rgba(0, 0, 159, 1)",
                "rgba(0, 0, 127, 1)",
                "rgba(63, 0, 91, 1)",
                "rgba(127, 0, 63, 1)",
                "rgba(191, 0, 31, 1)",
                "rgba(255, 0, 0, 1)"
              ];

         let heat =     <HeatMap
              gradient={gradient}
              opacity={3}
              positions={this.props.policeCall.map(({M,N}) => {
                  return { lat: M, lng: N};
              })}
              radius={30}
              />





        return (
            <div>
        <div className="floating-panel">
          <button onClick = {this.handleToggle}>HeatMap</button>
          <button onClick = {this.handleToggle1}>Markers</button>
        </div>
        <div className="map-container">

            <Map
                google={this.props.google}
                zoom={14}
                style={mapStyles}
                scrollwheel={true}
                initialCenter={{
                    lat: 32.71573699,
                    lng: -117.16108799



                }}
            >



                {this.props.policeCall.map(({ A, B, M, N, L,O }) => {
          return (
            <Marker
              onClick={this.onMarkerClick}
              name={A}
              info={B}
              priority={L}
              position={{ lat: M, lng: N }}
              story={O}
            />
          );
        })}

        {this.state.isHeatVisible ? heat: null}



                <InfoWindow
                    marker={this.state.activeMarker}
                    visible={this.state.showingInfoWindow}
                    onClose={this.onClose}
                >

                <React.Fragment> 
            <h4 style={h4style}>ID: {this.state.selectedPlace.name}</h4>
            <h4 style={h4style}>Date: {this.state.selectedPlace.info}</h4>

            {/* <h4 style={h4style}>
              Priority: {this.state.selectedPlace.priority}
            </h4> */}

            <h4 style={h4style}>
              Crime Level: {this.state.selectedPlace.story}
            </h4>
          </React.Fragment>


                </InfoWindow>
</Map>
</div>
</div>

        );
    }
}


const Mcontainer = GoogleApiWrapper({
    apiKey: '',
    libraries: ["visualization"]
})(MapContainer);

const mapStateToProps = (state) => ({
    policeCall: state.policeCall.policeCall
});

export default connect(mapStateToProps)(Mcontainer);
```[my map application][1]


  [1]: https://i.stack.imgur.com/NfSJV.png

score 0 · Answer 1 · answered Mar 13 '19 at 23:21

0

Change

{this.props.policeCall.map(({ A, B, M, N, L,O }) => {
      return (
        <Marker
          onClick={this.onMarkerClick}
          name={A}
          info={B}
          priority={L}
          position={{ lat: M, lng: N }}
          story={O}
        />
      );
    })}

to

{this.state.isMarkerVisible ? this.props.policeCall.map(({ A, B, M, N, L,O }) => {
      return (
        <Marker
          onClick={this.onMarkerClick}
          name={A}
          info={B}
          priority={L}
          position={{ lat: M, lng: N }}
          story={O}
        />
      );
    }) : null}

answered Mar 13 '19 at 23:21

Shivam Gupta

1,198
9
10

No need to do it, it'll show markers only if the isToggleVisible == true – Shivam Gupta Mar 13 '19 at 23:23
Just making the change as I put in the post should be enough – Shivam Gupta Mar 13 '19 at 23:24
I notice that my heat map needs work because the way its currently set up is assuming the data comes back right away but in the case when the data does not return right away the heat map is not going to display anything because its being set to a variable before the data gets back to the front end – developers Mar 16 '19 at 21:38

Diego Gallegos · Accepted Answer · 2019-03-13T23:29:32.320

0

As you already have handleToggle1 function setting the isMarkerVisible flag then on render() you can have this:

render() { 
    const markers = this.state.isMarkerVisible ? this.props.policeCall : []
    ... <your code>
    return <div> 
    ... <your code>
       {markers.map(({ A, B, M, N, L,O }) => {
          return (
            <Marker
                onClick={this.onMarkerClick}
                name={A}
                info={B}
                priority={L}
                position={{ lat: M, lng: N }}
               story={O}
            />
          );
        })}
    ... <your code>
    </div>
}

All the ellipsis is your code but for brevity I only added where you will need to make changes to toggle markers.

edited Mar 13 '19 at 23:29

answered Mar 13 '19 at 23:22

Diego Gallegos

1,722
2
18
31

so where does the {markers.map(({ A, B, M, N, L,O }) => ())} go ? – developers Mar 13 '19 at 23:25
1

Instead of your `{ this.props.policeCall.map(({ A, B, M, N, L,O })) => { return })}` – Diego Gallegos Mar 13 '19 at 23:27
I notice that my heat map needs work because the way its currently set up is assuming the data comes back right away but in the case when the data does not return right away the heat map is not going to display anything because its being set to a variable before the data gets back to the front end – developers Mar 16 '19 at 21:38

A toggle button on and off for markers in google maps react

2 Answers2

Linked