This blog will teach you how to obtain a user’s approximate coordinates and mark them on a GoogleMapReact Map.

Step Overview:

• Obtain a Google API Key.
• Obtain the user’s coordinates. This blog will show you two different ways of achieving this. _Option 1 is using built-in _Google Chrome geolocation and _option 2 is utilizing _Google’s Geocoding API (for browsers that may not support the first approach or users who elect not to process their location through the browser.)
• Add the Geocoding API to you project’s list of APIs. This API will allow you to obtain user coordinates by converting a an address or City & State (at the bare minimum) into approximate Latitude & Longitude coordinates.
• Install ‘google-map-react’
• Render map with a user’s location marker.

The tutorial will have code snippets and the copy-paste-friendly code is located at the end. 🔥

#redux #javascript #react