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>
);
}
}
And that's all folks!
I hope this tutorial helps in building your own app!
Top comments (46)
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 ;)
Hey ! Can you tell me more about this ? Where do you pass defaultProps ?
Here is a link to the file I used it in, it will help you out I think : github.com/titivermeesch/neighbora...
Thanks a lot, it helped me !
Le Bonjour à la Belgique :)
Great tutorial, thank you!
Wow this is what I have been looking forrrrrr
Ugh, thanks so much for making this. The examples on the Google Maps docs were confusing and dumb. Got it done in 2 minutes once I found this.
This was really helpful to me thanks a lot
thanks
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 :)
Thanks a lot. It's very easy to follow and implement.
Glad I can help!
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?
Thank you!
For some weird reason, my browser keeps saying “Loading maps”
Did exactly the same thing as displayed.
Any help ?
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 ?
Great article. I'm stuck on a specific next step, I wonder if anyone can help me.
I've added a polyline to the map, and want a user to be able to edit it. That bit is fairly straightforward you use the {Polyline} component and add it to the map the same way as the Marker in the article, and set the editing prop to true.
What I've been trying to find the answer to for days now is how I then access the getPath() method once the user has finished editing the line to access the LatLng points that the user has edited on the line.
I've tried adding a ref={} on the polyline itself, and although I can access the coordinates of the line from that, after editing the coordinates return the original coordinates and not the user edited LatLng of the updated polyline.
I'm trying to keep to using functional hooks, and all the examples I can find (and there are only a couple of them) seem to use the native Javascript API within classes rather than a react component. If that's the only way to do it then I'll stick to that, but I can't find any documentation that talks about the React library and the getPath() method, or the "set_at" or "insert_at" events that fire on the path of the polyline when a user moves or adds a new point.
Has anyone done this or knows how to do it, I would be really grateful for any help.
Thanks for it.
Awesome.