Set marker on react-google-maps when user clicks on map

Question

I want to set multiple markers on google maps whenever any user clicking on any location in the map. I am using functional approach in my react app.

                     <LoadScript googleMapsApiKey={mapKey}>
                     <GoogleMap
                     mapContainerStyle={{
                     width: '100%',
                     height: '85vh',
                     }}
                     center={center}
                     zoom={19}
                     onClick={ev => {
                     console.log("latitide = ", ev.latLng.lat());
                     console.log("longitude = ", ev.latLng.lng());
                      }}>
                    
 
                     <Polyline
                     path={trucks}
                     geodesic={true}
                     options=
                     {{
                     strokeColor: "blue",
                     strokeOpacity: 5,
                     strokeWeight: 4,
                     }}
             />
              {trucks?.map((d, i) => (
                     <MarkerF key={i} 
                     onLoad={onLoad} 
                     position={d} />
                     ))}
                     </GoogleMap>
                     </LoadScript>
                 </div> ```

Does this answer your question? [How to add marker on map by Click using react-google-maps?](https://stackoverflow.com/questions/49274808/how-to-add-marker-on-map-by-click-using-react-google-maps) — Yrll, Oct 19 '22 at 23:58

Evan Cadet · Accepted Answer · 2022-10-19T08:02:30.053

1

Here is how you can easily do this. You need to add a state for your markers and then on your onClick event call the setter such as this:

[markers, setMarker] = useState([]);

const onMapClick = (e) => {
    setMarkers((current) => [
      ...current,
      {
        lat: e.latLng.lat(),
        lng: e.latLng.lng()
      }
    ]);
  };

The map with markers:

<GoogleMap
  mapContainerStyle={{
    width: '100%',
    height: '85vh',
    }}
  center={center}
  zoom={19}
  onClick={onMapClick}
  >           
  
    {markers.map((marker) => (
        <Marker 
          position={{ 
            lat: marker.lat,
            lng: marker.lng 
          }} />
    ))}
</GoogleMap>

edited Oct 19 '22 at 08:02

answered Oct 19 '22 at 07:54

Evan Cadet

26
3

i have one more help required, i want to also mark the markers with numbers,, i.e everytime a new marker is set, a consecutive number is assigned to it.. 1,2,3,,,so on – Aayush Bhatt Oct 20 '22 at 05:23
in map you can give a second parameter like this marker.map((marker, index)) => {...} the index value will increment everytime time the element change, and do whatever you want with it, maybe u can look at the info box for marker to display the value of index on your markers, if that is what you want – Evan Cadet Oct 20 '22 at 08:33
would you mind sharing the exact snippet, actually i am new to this so not very sure. I want to give the incrementig value to label atttribute of marker – Aayush Bhatt Oct 20 '22 at 08:41
Sorry, idon't have the time right now, but here's one that i found that could help you https://codesandbox.io/s/react-google-mapsapi-multiple-markers-infowindow-h6vlq?file=/src/Map.js:1286-1436 – Evan Cadet Oct 20 '22 at 08:59

Set marker on react-google-maps when user clicks on map

1 Answers1