DEV Community

Cover image for Running Trails With Google Maps in React
Yar
Yar

Posted on

Running Trails With Google Maps in React

Working app. Source code

Introduction

Hey! So I am a print designer. I discovered the world of web development last summer. What I find exciting in this media is two things.

How the layout is fluid. It occupies space in a different manner, changes size and colour from device to device. Or as you change the browser window size.

How you can output the data. You don't have to create charts, set circle size and so on manually. You just feed the data and tweak how to display it.

Here is another one of my projects.

The plan was to...

  • use public map API

  • output the data over the map

  • create a responsive layout

Main resources

Alt Text

The website displays a running trail with Polyline object and the trail info with InfoBox

  1. Google Maps Javascript API official docs

  2. Thare are lots of libraries for using Google Maps in React. I went with @react-google-maps/api

  3. You can go winamp with your map using snazzymaps.com themes

  4. Leigh's channel was the main reference. Google maps, Mapbox, clustering and tons of other React stuff there

Learned a thing or two in the process

  • So yeah, I figured out how to use Google Maps API in React

  • Convert GPX running tracks to GeoJSON format

  • Import json data to React components

  • Refreshed memory on importing images / using them as CSS background in React

  • Practiced splitting an app to components / helper functions in separate files

  • Created responsive layout with media queries and a burger menu

That was fun!

Known issue

The InfoBox does not appear after clicking the navigation menu and going back to the home page.

I admit that this is beyond my understanding of React / Google Maps inner mechanics at this point.

If you feel like investigating you may find the issue following this link

Anyway

Here is my twitter.

See you around! 👹

Discussion (0)