How to add marker onClick and show my geolocation in google-maps-react?

Question

I found a lot of useful information on google maps documentation but with simple use of js in html, in case of react honestly I don't understand it.

Source code:

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

export class MainMap extends Component {
    render() {
        return (
            <div>
                <h1 className="text-center">My Maps</h1>
            <Map google={this.props.google}
                 style={{width: '80%', margin: 'auto'}}
                 className={'map'}
                 zoom={14}>
                <Marker
                    title={'The marker`s title will appear as a tooltip.'}
                    name={'SOMA'}
                    position={{lat: 37.778519, lng: -122.405640}} />
                <Marker
                    name={'Dolores park'}
                    position={{lat: 37.759703, lng: -122.428093}} />
                <Marker />
                <Marker
                    name={'Your position'}
                    position={{lat: 46.475640, lng: 30.759497}}/>
            </Map>
            </div>
        );
    }
}



export default GoogleApiWrapper({
    apiKey: (MY-API-KEY)
})(MainMap);

i want to add marker by clicking on map and don't know how... help please!

Answer 1

The map has an onClick prop which you can give a function to handle clicks on the map. The third argument to this function includes the coordinates of the click.

You could use these coordinates to add a marker to your state that you use in the render method.

Example

class MainMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [
        {
          title: "The marker`s title will appear as a tooltip.",
          name: "SOMA",
          position: { lat: 37.778519, lng: -122.40564 }
        }
      ]
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick(t, map, coord) {
    const { latLng } = coord;
    const lat = latLng.lat();
    const lng = latLng.lng();

    this.setState(previousState => {
      return {
        markers: [
          ...previousState.markers,
          {
            title: "",
            name: "",
            position: { lat, lng }
          }
        ]
      };
    });
  }

  render() {
    return (
      <div>
        <h1 className="text-center">My Maps</h1>
        <Map
          google={this.props.google}
          style={{ width: "80%", margin: "auto" }}
          className={"map"}
          zoom={14}
          onClick={this.onClick}
        >
          {this.state.markers.map((marker, index) => (
            <Marker
              key={index}
              title={marker.title}
              name={marker.name}
              position={marker.position}
            />
          ))}
        </Map>
      </div>
    );
  }
}

const App = GoogleApiWrapper({
  apiKey: (MY-API-KEY)
})(MainMap);