Integrating the Google Maps API

The key feature of Let's Go is the integration of Google Maps. The user will log into the app and a local map will appear with Markers that indicate nearby Groups that the user could join. In order to access the Maps API for my dev environment I signed up for free access to the Google Could Platform, available here. After doing research and reading through the documentation, overall I've found the Google Maps APIs fairly easy to integrate and use in my app.

I began integrating Google Maps by adding a map to the AddGroup component. My plan going in was to have the user use Google Maps to determine the meeting place or location for their group. I've used both the Google Maps JavaScript API and the Geocoding API to accomplish this. Since I'm working with React, I used the google-maps-react package to access the Maps JavaScript API and display the map.

Blog posts and guides are a great way to learn new technologies, so I checked out a couple before I began coding. The first was by Rachael Njeri on scotch.io. Rachael's post walks through how she implemented Google Maps using React, added Markers and an InfoWindow, and even found the location of the current browser. The post is well written, easy to follow, and was a very useful tool for me as I added the map into my own code.

https://scotch.io/tutorials/react-apps-with-the-google-maps-api-and-google-maps-react

The map itself is a React component so I created a new folder called map, and a new file MapContainer.js. The MapContainer component returns the Map from the google-maps-react package. I also use the GoogleApiWrapper to provide my API key from the google cloud platform. I learned how to set up this map from Rachael's guide, mentioned above.

The map itself is set to default center on Boston, MA. When the user enter's a city and state and clicks Submit, the map will update to the new location.

As for the location thats displayed on the map, I want an input field where the user can enter the city and state. I split up the existing form into two. The first form now contains the input for the user to type the city, and then the rest of the form will follow after the map.

Getting the map to update on the form submit was a big challenge for me. I ended up creating a new state property for searchLocation, which is the value of the location input. This is contained within its own form. When the searchLocation form is submitted the onGeoSubmit function is called. Since I'm converting the user provided city/state information and converting to geographic coordinates I used the Google Geocoding API as well. The Geocoding API is for converting between coordinates and addresses or locations.

A feature that I added, that I might change later, is that the location search bar updates the text to return the result of the search query. In the below example, I typed 'Breckenridge, CO' into the search bar. The text in the search bar then updated itself to 'Breckenridge, CO 80424, USA based on the results from the Geocoding API.

After searching 'Breckenridge, CO' the search text updates to 'Breckenridge, CO 80424, USA and the map centers over Breckenridge.

At this point, the user can search for a city and the Google Geocoding API will provide results. I thought it would be interesting to have the Map display update to center the map on the city. To do this I used the 'center' prop for the map component. Using the results of the Geocoding API, I pass the 'center' prop the coordinates of the returned location. Now, the map updates to the city that the user entered in the search field. This is a feature that I really like because it means that when I the map to the existing Group component, I will be able to use the coordinates and location that are saved to the location.

In order to make the map even more user-friendly, I added the Marker to the center of the map. The Marker itself is part of the google-maps-react package. I have the marker's position set to the center of the map. I found that I could make the Marker draggable which is really nice! I decided to use the Marker to re-center the Map so that the user can fine-tune the location of their meeting spot! This is a really nice feature because the user will be able to mark and share their exact location, even if there isn't a specific address (specific spot in a public park, or a certain point on the beach, etc.)

Below on the left I searched 'Gilford, NH'. Then I dragged the marker from Gilford center to 'Weeks Forest' and the map updates to center over the Marker. This way the user can fine-tune their group location!

At this point I'm feeling good about using the Map to determine the location of the group meeting place. The user can search for a location and then place the marker in a specific spot if they choose to but using the Marker. Up next, I'm going to add the Map to the Group component so that the Group will display the location when other users want to join!