Building Community Resource Web-Apps with Google Maps API

Hello beautiful people!

In this post, I’ll be giving an overview on utilizing Google Cloud’s location services APIs to build a web-app that enables users to find resources near them.

Since the pandemic, there has been a lot more emphasis on what has always been true for people of color- our communities keep us safe. Community rallies when we need support, mutual aid, and care. I’ve noticed Google docs, static web-pages, and other forms of resource sharing platforms pop up as a result of more people seeking a variety of services.

For something like a national database or communities with different types of resources, using Google Cloud APIs can create a more dynamic way of creating, querying, and displaying data.

 

📌 Description of app: users can enter their location and see resources in their area / within a specified radius pinned on a map. They can click on each pin to view the resource and also filter by resource type / categories.

Building with the MERN Stack

The project uses the MERN stack: a web development framework made up of the stack of MongoDB, Express.js, React.js, and Nodejs.

For the main purpose of this blog, I will be only covering the Google APIs and what they do. I realized in the middle of making this tutorial it’s way too long to code along so I will be breaking up the code’s main functionalities further in the coming weeks!*

Google Cloud APIs & What They Do

 
Places API
This API autocompletes addresses in an input so users are able to select their location, if it is within Google’s Places library. This is helpful in ensuring we have the correct, formatted address we need to query the next API and it’s an easy way for users to input their information!

Input provides suggestions and auto completes the option that users select

 
Geocode API
This API converts addresses into coordinates, and vice versa. This is used in the code when the user inputs their location and also when you post a resource, so that we are able to check if the coordinates are within a specified range of one another.

📌 The great thing about building with the MERN stack is that there are node modules we can use that make it easy to implement these APIs. I was able to quickly convert the user’s location into coordinates by importing “react-geocode” and using its built-in methods.

//import component
import Geocode from "react-geocode";

//set API key
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_API_KEY);

//convert from address(userLocation) to coordinates (userCoords)
Geocode.fromAddress(userLocation).then((res) => {
      let userCoords = res.results[0].geometry.location;
      setCoordinates(userCoords);
    });

 
Maps JavaScript API
This API displays a Google Map with “Markers” pinned, using the resource’s coordinates. “InfoWindows” display information when users click on the Markers. Map, Markers, and InfoWindow components are imported from google-maps-react npm package.

Note: Resources that are within the user’s radius are calculated through a separate algorithm, not built-in to Google Maps.

If you sign up for a Google Developer account, you will receive $300 of developer credits for 90 days, which is plenty of time to test your app! You will not be charged and your app will not make API calls once your trial runs out.

Why is this important?

While this is only the first step in providing someone with resources and care, there are plenty of other use cases utilizing this as a template / base. With more developers utilizing larger platforms- there’s hope that technology will be built with us, for us. Can’t wait to see what you dream up!

Happy coding 👾

Ellie

I would like to take a moment to thank organizers, specifically Black women / femmes / gender non-conforming folks. Our collective liberation deeply tied to the work that you do and the ways you show up. Thank you. May you be protected and safe. May the burden of teaching and emotional labor not fall entirely on you. Wishing you rest and ease. Wishing you softness.

You can view the code here if you’d like to start building: codebase on Github

For more instructions on setting up, please visit the blog post hosted on my website.