DEV Community

loading...

React Google Maps How to use the Google Maps API with React.js

jessicabetts profile image jessicabetts Updated on ・3 min read

hello-class

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!

google-maps-API

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!

google-map-with-marker

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

And that's all folks!

google-map-with-many-markers

I hope this tutorial helps in building your own app!

Discussion

pic
Editor guide
Collapse
titivermeesch profile image
PlayBossWar

Thanks a lot for this!
I had to do a little research for the styling since I wanted to use their custom json style files.
A little tip for those who want to do this too : save it as a defaultProps and they use it as shown above ;)

Collapse
cuzureau profile image
Christophe Uzureau

Hey ! Can you tell me more about this ? Where do you pass defaultProps ?

Collapse
titivermeesch profile image
PlayBossWar

Here is a link to the file I used it in, it will help you out I think : github.com/titivermeesch/neighbora...

Thread Thread
Sloan, the sloth mascot
Comment deleted
cuzureau profile image
Christophe Uzureau

Thanks a lot, it helped me !
Le Bonjour à la Belgique :)

Collapse
sanjayjb profile image
sanjayjb

Hey! Thanks a lot for the Maps implementation.
I was wondering how Polygon can be used from google-maps-react to mark a triangle on the map using 3 lat and long coordinates. could you please help me out with that?
thanks in advance :)

Collapse
sarabs3 profile image
Sarabjeet Singh

Thanks a lot. It's very easy to follow and implement.

Collapse
jessicabetts profile image
jessicabetts Author

Glad I can help!

Collapse
dschulz1227 profile image
Damon Schulz

I am trying to hide my API key by putting it in a default.json in a Config folder and hiding it. it's under my 'src' folder, but when I go to import it to my Map component, it says it is outside of the project '/src' directory. I've tried numerous ways, do you have any idea what I should do?

Collapse
shrsabin profile image
Sabin Stha

Is it possible to use legends on it.

Collapse
jessicabetts profile image
jessicabetts Author

Not sure! Never tried!

Collapse
jothamardel profile image
Collapse
sayanmondal2098 profile image
PH3N1X

Thanks for it.

Collapse
barcarel profile image
anncarel

Very well done! Thanks for sharing.

Collapse
richwag profile image
Rich Wagenknecht

Nicely done! Very clear and to the ponit.

Collapse
jessicabetts profile image
Collapse
fra profile image
Collapse
btcbot_in profile image
BtcHodler

please write about google address auto suggestion fill form filed in react

Collapse
sweetestshuga profile image
Eze Sugar 👩‍💻

There is an undeclared veriable as mapcontainer, and it really throws up errors, i wish to know more on that

Collapse
vitarox profile image
VitaRox

Great tutorial, thank you!

Collapse
mqshaikh8 profile image
Collapse
sandy1565 profile image
sandy1565

hey, can someone please help me to highlight the marker on click event outside the map? thanks in advance.

Collapse
matt_bevis16 profile image
Matthew Bevis

I am trying to implement the solution you have above, just with custom markers that are my own react components. Can anyone suggest or point me towards something I can follow?

Collapse
bharathnallamothu profile image
bhaRATh

how to implement MarkerClusterer in react

Collapse
kazujini profile image
KazuJin Initiative

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

Where can i find this file? do i have to create one myself?

What is the content of this.props.google ?

Collapse
jessicabetts profile image
jessicabetts Author

If you are unsure about what export default is I'd read this:

stackoverflow.com/questions/364265...

Collapse
mardiansn profile image
mardiansn

Hey, thanks a lot for this post. But, How to set the maps to become 'position:relative' to my custom div? Cause it's kinda frustrating because it is by default 'position: absolute'. Thanks again!

Collapse
reangeloj profile image
Re-Angelo Jarvis

Add a container around it. Set the container around it to position relative and 100% width, height.

div:first-of-type {
position: relative;
width: 100%;
height: 100%;
}

Collapse
adam_kif profile image
Adam Kif

Peace .. thank you .. that helps me a lot in 2020

Collapse
ashadjohnson profile image
Ashad

Hi my marker class doesn't show on the map. It's rendered but it isnt appearing on the map. Should I be rendering the marker component inside of the map component?

Collapse
jessicabetts profile image
jessicabetts Author

If you observe step 6, the Marker Component is inside the Map Component.

Collapse
mosescode1 profile image
Moses

hello, excuse me I did everything perfectly but there is still a JavaScript console problem even though I have a JavaScript API key in place. Can you please help

Collapse
saviocarval profile image
Saviocarval

how can i add an InfoWindow

Collapse
sobowalebukola profile image
Collapse
hawicaesar profile image
HawiCaesar

Hey Jessica, thanks for the tutorial. You've quite a lot here.

By any chance have you ever tried configuring autocomplete/places with the markers using google maps react ?