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
Once we have the react application setup, we need to install the library Google Map React.
npm install — save google-map-react
Now the setup is complete. Let’s do a quick test to make sure the react application is ready by running
If everything has worked, you should now see the following screen in your browser.
Now that we have the initial setup of the project complete, we are ready to extend the application to work with Google maps.
Adding Map Component
First, let’s create a Constants.js file which will contain our Google Map API key used for accessing Google Maps, default map options, default longitude /latitude for our map, default zoom value for our map, the Eulerio Access key and Eulerio…