Pizza Time — Sprint 1: Planning and Implementing Google Maps API/Places Library

Labs Log: StarDate 2019.5.18 —

Labs are finally upon us. The first Sprint is over and we are well on our way to an awesome application.

So far, our team has managed to not only meet and surpass the main objective of this sprint but also to get the majority of the most difficult aspects of the project knocked out. The main things we decided to prioritize were the implementation of FireBase Authentication and the Google Maps API.

What is our app anyway?

Our app is essentially a way to connect your foodie and social sides. We allow you to create and manage events with your fellow pizza loving friends! We also give you the ability to discover new pizza places near you via the Google Maps API searches, save your favorite places and invite your friends to come along on the journey!

What have I been working on?

So far, I have been the pioneer with the Google API services. It has been my job to research and implement this feature into our application as well as to teach my fellow teammates what I am learning along the way.

Let me give you a quick rundown on what I’ve managed to figure out so far…

So, we are using React on our front end which introduced some nuances in getting the API to work correctly.

1. It requires the script tag to pull the library into your application. Normally those would go in your index.html file, but when doing so I was still receiving errors that Google was not defined. Resolution? Create a loadScript function that uses DOM manipulation to create a new script tag:

2. React requires us to target the window when using any DOM manipulation or interacting with any of the Google services we bring in via a script tag. So where Google documentation says use google.maps.Map to instantiate it, React developers would need to use window.google.maps.Map in its place. This remains the same for any other services brought in via the script tag.

3. For the initial load of the event search component, we have it conducting a default search for pizza places near the user’s location. In order to pull this, I had to do some digging and figure out how to prompt the user to allow us access to their location, pull the location from the result and store it in state for us to use. Here is what I got:

Here we are doing an initial check to see if navigator.geolocation exists in order to determine if the browser supports location tracking. If so, we call its getCurrentPosition method in order to get the location’s latitude and longitude. We then set our lat and lng state using React’s Hooks. Once that is done, we set the position of our infoWindow (we will be replacing the infoWindow with markers later in the project), we set the content of the infoWindow, we tell it to open in the map and then we set the center of the map to our user’s current location!

Other than these few little things to figure out everything else was pretty straight forward if you simply followed the Google documentation and kept the quirks in mind!

What planning have we done?

1. In order to plan this application, we first went through the TDD (Technical Design Document). This helped us determine:

• Tech Stack we would use (React, Redux, Hooks, Google Maps API, SendGrid, SQLite3 (locally), PostGres (prod), FireBase Authentication, NodeJS, Express, Axios, Jest)
• The components we would need
• The tables we would need for the database
• The user flow of the application
• What would be difficult to implement, and thus needed to be knocked out initially.

2. We were also lucky enough to have someone super skilled with UI/UX who was able to create some great mocks for us in order to get a better idea of how the application should look.

3. We were also able to figure out what everyone’s strengths and weaknesses were so that we had a better understanding of who would take charge of what and who would need help in some other areas.

All in all, I think we have a stellar group and I am excited to see how this application turns out.