How to use the Google Maps API with React.js
Tags: react, googlemaps
Published: 2019-04-25 05:56:12

---
title: How to use the Google Maps API with React.js
published: true
description: 
tags: #react #googlemaps
---
![hello-class](https://media.giphy.com/media/3ohjV1r9VfQt0JLKzS/giphy.gif)

While trying to implement the google maps API in a personal react.js project I came across a couple of examples that I found to be very complicated and confusing. So here is a brief and simple example of how I used Google Maps in my app!

##First, things first!
Go to the [Google maps API](https://developers.google.com/maps/documentation/) page, sign-up and get a token to use! You must enter a credit card number to receive your token. However, Google claims they will not charge your account without you personally upgrading your service. **Proceed at your own discretion**.

Once you have an API key you can start building your app!

###Create your react app

```
npm init react-app my-app
```

###Install dependencies


```
npm install --save google-maps-react
```
This is how we get the google map as a component!
Check your package.json file to make sure it is installed!

Once your initial set up is done you can start coding!
##1. Import google-maps-react!

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

##2. Add the Map Component to your render function!

```jsx
render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        />
    );
  }
```
##3. Edit your export default statement

```jsx
export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(MapContainer);
```
Make sure to insert your API key here!

##4. Add styling
If you'd like you can change some style properties. I did as a constant variable outside of my class.

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

##5. Spin up your server!

![google-maps-API](https://i.ibb.co/47ZsVrd/Screen-Shot-2019-04-24-at-10-14-55-PM.png)

Great! You did it! But honestly, what is the point of a map without any markers! So let's add some!

##6. Mark it up!

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

Update your Map component to include a Marker Component!

```jsx
render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        >
          <Marker position={{ lat: 48.00, lng: -122.00}} />
        </Map>
    );
  }
```

Then you'll have this!

![google-map-with-marker](https://i.ibb.co/RDWCvDg/Screen-Shot-2019-04-24-at-10-30-40-PM.png)

##Let's add more!

Instead of adding one marker, you can programmatically loop through the state to display places. In my example, I am displaying a few thrift stores in the area. You can also add events to them such as onClick!

```jsx
export class MapContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      stores: [{lat: 47.49855629475769, lng: -122.14184416996333},
              {latitude: 47.359423, longitude: -122.021071},
              {latitude: 47.2052192687988, longitude: -121.988426208496},
              {latitude: 47.6307081, longitude: -122.1434325},
              {latitude: 47.3084488, longitude: -122.2140121},
              {latitude: 47.5524695, longitude: -122.0425407}]
    }
  }

  displayMarkers = () => {
    return this.state.stores.map((store, index) => {
      return <Marker key={index} id={index} position={{
       lat: store.latitude,
       lng: store.longitude
     }}
     onClick={() => console.log("You clicked me!")} />
    })
  }

  render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        >
          {this.displayMarkers()}
        </Map>
    );
  }
}
```
And that's all folks!

![google-map-with-many-markers](https://i.ibb.co/BZL3qtb/Screen-Shot-2019-04-24-at-11-00-26-PM.png)

I hope this tutorial helps in building your own app!