Building Community Resource Web-Apps with Google Maps API

Hello beautiful people!

In this post, Ill be giving an overview on utilizing Google Clouds 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. Ive 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 its way too long to code along so I will be breaking up the codes 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 Googles Places library. This is helpful in ensuring we have the correct, formatted address we need to query the next API and its 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 users location into coordinates by importing react-geocode and using its built-in methods.

//import componentimport Geocode from "react-geocode";//set API keyGeocode.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 resources 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 users 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- theres hope that technology will be built with us, for us. Cant 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 youd like to start building: codebase on Github

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