How do I display markers on click and get coordinates using google-maps-react API

Question

So I have a very simple react app that is using the google maps API in react and trying to display a marker when a user clicks on any point on a map.

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

class MapContainer extends Component {
  mapClicked(mapProps, map, clickEvent) {
    return(
      <Marker postition={{ lat: mapProps.lat, lng: mapProps.lng}}
                name={'Current location'} />
    );
    
  }

  render() {
    return(
      <Map google = {this.props.google}
        onClick={this.mapClicked}

        style = {{width:"100%", height:"100%"}}
        zoom = {10}
        initialCenter = {
          {
            lat: 37.663626,
            lng: -122.106001
          }
        }
      >
        <Marker
            name={'Current location'} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'HIDDEN'
})(MapContainer)

I see a marker right now at the position i specified in initial center. What I'm trying to do is be able to display a marker and get its coordinates when a user clicks on a map

i have the mapClicked function but am very confused on how to get it to display a marker and get me cooridnates

mapClicked(mapProps, map, clickEvent) {
    return(
      <Marker postition={{ lat: mapProps.lat, lng: mapProps.lng}}
                name={'Current location'} />
    );
    
  }

Answer 1

According to your question, what you wanted is to:

#1 Display the markers on click using the mapClicked function.

#2 Have an infoWindow that shows the coordinates of each marker.

After reproducing your code, I confirmed that the reason why you can't produce a new marker is because of the content of your mapClicked function, and the content of your <Marker />

first is that your mapClicked does not do anything.

I used this answer as reference for showing markers on click. Then added an InfoWindow component to show the coordinates of the marker.

I modified it's content into this...

mapClicked(mapProps, map, clickEvent) {
  const lat = clickEvent.latLng.lat();
  const lng = clickEvent.latLng.lng();

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

I stored the click event's lat and lng inside a variable to pass it for the marker's position per click.

I then added a constructor for the marker.

constructor(props) {
  super(props);
  this.state = {
    markers: [
      {
        title: "This is a title",
        name: "Yrll",
        position: { lat: 37.663626, lng: -122.106001 }
      }
    ]
  };
  this.mapClicked = this.mapClicked.bind(this);
}

Next is I modified your render() and included the <Marker /> inside this.state.markers.map((marker, index) and also the <InfoWindow> prop. Now it looks like this:

  render() {
    return (
      //map
      <Map
        google={this.props.google}
        onClick={this.mapClicked}
        style={{ width: "100%", height: "100%" }}
        zoom={10}
        initialCenter={{
          lat: 37.663626,
          lng: -122.106001
        }}
      >
        {this.state.markers.map((marker, index) => (
          //marker
          <Marker
            key={index}
            title={marker.title}
            name={marker.name}
            position={marker.position}
            onClick={this.onMarkerClick}
          ></Marker>
        ))}
        {/*infoWindow*/}
        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
        >
          <div>
            {/*Placeholder for content*/}
            <p1>{this.state.coordinate}</p1>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

For the infoWindow, I did the same storing method with the onMarkerClick, then passed the information down to the <InfoWindow /> props.

  onMarkerClick = (props, marker, e) => {
    //stores the coordinates
    const lat = e.latLng.lat().toString();
    const lng = e.latLng.lat().toString();
    const coordinates = lat + ", " + lng;
    console.log(coordinates);
    this.setState({
      activeMarker: marker,
      showingInfoWindow: true,
      coordinate: coordinates
    });
  };

Now with all these,

#1 markers should show up when you click on the map, and...

#2 When you click on the infoWindow, it will show you its coordinates.

It's important that you know about states when using react. But anyways, I hope this helps!

If you need some reference, here's the codesandbox link I used: https://codesandbox.io/s/patient-sea-9vs5eg