Hi, I’m Ellie! 👋🏼
Hi, I’m Ellie! 👋🏼
Build Community Resource Web Applications with Google Maps API
Build Community Resource Web Applications with Google Maps API

Build Community Resource Web Applications with Google Maps API

June 1, 2022 by Ellie Nguyen

Hello beautiful people!

image

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.

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.

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

📌
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.

Setting Up

Toggle the arrows below to set up the app and database.

‣
☁️ Google Cloud’s API Services (free trial starts with $300 of credits / 90 days)
  • Sign up for a Google Developer account, create a new project, and activate your free trial. 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
  • Enable APIs and services on the left side menu —> then click the + …
    • image
  • Enable the Maps JavaScript API, Places API, and Geocode API
    • image
  • Create an API Key: Credentials —> + CREATE CREDENTIALS —> API Key
    • image

    Copy your API Key for later use

‣
🚀 Running Your React App
  • Clone the repository and follow the instructions on the repo’s readme to run your app
‣
🌐  Database Setup & System Design
  • Create a database in MongoDB called “community-apps” and a collection called “resources”. If you name them differently, make changes in the record.js and conn.js files.
  • I’ve created a form on the /create page to add new resources and POST them to the database. The resources’ address will be converted to coordinates when we post.

Schema for each document in our “resources” collection

image

A quick glance at the API calls the app makes when users input their location

image

If you are able to successfully post to the database from “Add a Resource” and see all of your documents on “All Resources”, yay! You’re connected.

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
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.

App does not currently support InfoWindows or querying by category but will soon!

image

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

Until Next Time

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.

Additional Resources & References

How to Use the MERN Stack

Instructions on how to set up a MongoDB database

Google Maps API Documentation

Implementing Google Places API / Autocomplete

Tutorial on google-maps-react

Code to check if a resource is within a user’s radius

Connect with Me

image

Other places to find me:

LinkedIn | Github | Web Dev

🚨 Looking for a creative and dedicated engineer to join your team? I’m open for hire!

☕️ Let’s have a coffee chat!

💭 For questions or comments:

  • holistictech.io@gmail.com