Finding Places From Current Location

We usually use Google Map to find restaurants or gas stations from our current location, but I am sure some have wondered how that is done. Here, we will find out. I will be using React to show this, as well as a Google API key.

First, an API key is needed to access the Google Maps API. The second step is we need to set our state with arbitrary latitude and longitude. See figure 1.

Fig 1. Set the initial state.

Next step is to determine our current location from using our “ComponentDidMount()” from figure 2.

Fig 2. Find your location.

Next, we want to see the current location. That is the purpose of “renderChildren()”. The “render()” will display everything. See figure 3.

Fig 3. Render current location.

The data will be sent to the file “MapContainer.js” where it will display the map. Now that we have our current location, we want to find places near our area. This will show up based on how much we zoomed in to our location. First you will need this piece of code from figure 4 to fetch places.

Fig 4. Fetch places near current location.

Final step is to display it. See figure 5.

Fig 5. Show all places nearby.

Once we have the code from figure 5, we can see places nearby our current location. We can move anywhere around the map and it will show the places you desire.

The most important thing is we need the Google API key in the second line of figure 4 in order for it to work correctly. No key, no map.

Fig 6. Showing the locations of gyms in LA.

From figure 6, we see the Google API key works. Try it out yourself.

References

1. https://www.digitalocean.com/community/tutorials/how-to-integrate-the-google-maps-api-into-react-applications
2. https://stackoverflow.com/questions/50780417/update-google-map-based-on-geolocation-with-react