FRONT END

How to use the Google Maps API with Custom styling in React.js

Integrate beautiful Google maps in your React project

Photo by Pixabay from Pexels

When my friend tried a new hairstyle I asked him “Why did you cut like this?” And he told that he wanted to shine as a model. Therefore, I understood that people like to show them uniquely and beautifully.

When I developed a personal react application I wanted to implement google map API. I searched a lot of examples on google and finally, I found a simple solution. Here I will briefly explain how I used the application and what are the custom styles we could add to the google map. Here we will look from scratch. You could see the demo here. This is my 29th article in Medium.

First And Foremost

If you don’t have Google maps API token signup Google maps API and get the token to use! To receive your token you must enter a credit card number. Yet Google says they won’t charge your account without you updating your service personally. Go ahead at your decision. Once you’ve got an API key, begin to develop your app!

To create a react application run the following command in your shell/terminal in a specific folder (e.g., desktop )

npx create-react-app google-map

A new folder will be created, and it will be named as google-map. From this step, your application is bootstrapped with Create React App. For more information, click the link. Then open that project in your IDE. I am using VS Code IDE.

Photo by Nicole De Khors from Burst

Set About Your Work

If you open the react application then you need to remove the unwanted files. Therefore you need to go to the src folder and delete Logo.svg, App.css, index.css, and App.test.js files. And create the following folders inside the src folder named components, assets and helpers then move your serviceWorker.js into the helper’s folder and App.js file into the Components folder. Then open the index.js file and delete the following snippet in index.js file.

import ‘./index.css’;

Then modify the App.js and serviceWorker.js files paths in index.js import like following.

import App from ‘./components/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;

Go to the Components folder and open the App.js. Delete the return part of the App function.

You need to install a dependency to get the google map as a component. For that, use the following command to install the dependency.

npm install --save google-maps-react

Photo by Bruno Nascimento on Unsplash

From The Ground Up

Create a new file inside your Component app and name it as Map.js. Then you need to import google-maps-rect. For that, add the following snippet in the Map.js.

import { Map, GoogleApiWrapper } from 'google-maps-react';

Now you need to render the Map component. Therefore add the Map Component to your render function.

In the above code, I added ordinary styling. I did as a constant variable inside the render method.

const mapStyles = {
  width: '100%',
  height: '100%',
};

you need to add your export default statement in the Maps.js file like below the snippet

export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(MapContainer);

Make sure to enter your API key here!

Photo by Christian Murillo from Burst

Import the Maps component inside the App.js file. So your App.js should be like below.

When you start your development server by using npm startthen you could see the below result.

Boom! you did it but what is the point of using google map. But legitimately, what is the meaning of using google map without any marker. Therefore, let’s add a marker. For that, update your Map component to include the Marker component. Here I used a different latitude and longitude, you could use whatever the latitude and longitude that you need.

import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

Great! you added the marker on the map.

A Thing of Beauty is a Joy Forever

Now you are in the most interesting part of this article. Now, let’s look after the custom styles. It is simply a JSON object. You’ll store the custom styles JSON in GoogleMapStyles.js file. The theme I used from Styling wizard: Google Map APIs. If you need more beautiful styles then try a style from Snazzy Maps or Build your own unique map style by customizing the JSON object. your GoogleMapStyles.js file will look like the following.

Now you need to import this style JSON in your Maps component.

import googleMapStyles from “./GoogelMapStyle”;

After you import styles JSON, you can set the style JSON as a defaultProps of the Maps Component. This can be done by defining defaultProps on the component class itself, outside of the class body, as shown in the following code snippet:

Maps.defaultProps = googleMapStyles;

Then you need to pass this prop to the styles props of the Map component as shown in the following code snippet:

<Map
  google={this.props.google}
  zoom={15}
  styles={this.props.mapStyle}
  initialCenter={{ lat: 9.761927, lng: 79.95244 }}
/>;

Now your Maps component will be like as shown in the below file.

Put Your Feet Up

It is easy to implement google map in react. There are a lot of npm packages to help to implement the google map in React. For me,google-maps-react is easy to use and It is a small bundle size than others. You can clone the repo from this link.

Happy Coding 😊 !!!