React and Google maps

9 min readSep 3, 2021

Every website or mobile application these days are using maps to display information regarding business activity or displaying location specific information targeted by geolocation.

This article is to demonstrate how to integrate Google maps with your react application and store information regarding interesting landmarks specific to your area.

Let’s get started.

Data Service Setup

In order to store information relating to our landmarks, we will require a data service layer to add and retrieve our landmark information. Follow the steps found in Eulerio getting started guide to setup a landmark data service that we can use to store our data.

Once you have completed the getting started guide, you will have fully functional API endpoints that you can use to access and store your landmark data. With Eulerio taking care of all your backend concerns, it allows you to concentrate fully on the UI aspect of your application.

React Application Setup

The next step is to setup your landmarks react application. Follow the guide Create React application to create your react project.

npx create-react-app landmarks
cd landmarks