Charlie Taminian's Logo

google maps

Google map app design showing on a desktop machine

React, Google, Yelp!

Explore some of the best dance night clubs in Hollywood, California with this responsive React website. Built using Google maps and the Yelp Fushion API.

This project started off with a simple problem that needed to be solved. How do you implement Google maps using React? Turns out the solution wasn't as straight forward as one thought. After much research and analysis, I decided to use a third party package built specifically to integrate Google maps into React.

Great solution right? Well not really, now I had to scour the package's documentation to understand how it works, how it's pulling the data from Google and how I can modify it to pull out the features that I wanted. A process that took many hours of research to say the least.

At the end, it worked pretty well, I was able to create a custom black and white map theme, use animated bouncing markers and display information from the Yelp Fusion API into info-windows.

DEMO LINK

Technologies:

- React

- Google Maps

- Yelp Fusion API

Google map app design showing on a mobile device Google map app game design showing on a mobile device

Mobile Responsive

Displaying a map on a mobile phone isn't as simple as I thought especially when you have a set of predefined markers that all need to be visible. Do you zoom the map out to fit all the markers or do you center the map around the area containing the markers?

With solution A, yes all the markers will be visible, but at the expense of them bunching up together and becoming harder to press. With solution B, the markers can be easily pressed but they are not perfectly centered on the screen. I decided to implement solution B, as it's obvious, my users need to able to click on the markers freely, plus they could always zoom and maove the map as they please.