How to use the Google Maps API with React.js

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 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!

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

2. Add the Map Component to your render function!

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

3. Edit your export default statement

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.

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

5. Spin up your server!

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!

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

Update your Map component to include a Marker Component!

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!

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!

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>
    );
  }
}