Getting Started With the Google Maps API

Marina McGrath
Aug 23, 2017 · 3 min read

Like many kids, one of my early fond memories with a computer was playing around with Google Maps. It was a fun and interactive way to check out what a random street in South Dakota looked like while I was on the East Coast. The Google Maps API, it turns out, is also a fun and interactive way to get and display data about different places.

I recently worked on a project where users could make postings for their bands and find new members. The app had a place to put a location, but it was a text field. I was tasked with adding a map to display this information to the users. Enter Google Maps. The project was built in React, so I was able to use several npm packages that would make the API even easier to work with.

First, I added a Map component and imported the react-google-maps package. This gave me access to display the basic map, center it on New Orleans, and set its basic zoom to 11(a zoom of 1 would display the world, while a zoom of 15 would be a street view).

import { GoogleMap, withGoogleMap } from 'react-google-maps';
import { default as React, Component } from 'react';
const googleMapUrl = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;const SimpleGoogleMap = withGoogleMap(props => (
<GoogleMap
googleMapUrl={googleMapUrl}
zoom={props.zoom}
center={props.center}
/>
export default class Map extends Component {
constructor(props) {
super(props);
this.state = {
zoom: 11,
center: { lat: 29.969516, lng: -90.103866 },
markers: [],
markersLoaded: false,
};
}
render() {
return (
<SimpleGoogleMap
containerElement={
<div className="mapContainer" />
}
mapElement={
<div className="map" />
}
/>
);
}
}

And our page looks like this:

If you have issues, check the height and width of your container. Now, all we have to add is a call to the database to get the locations for each band, find their coordinates using the geocoder, and render them as markers on the map. We’ll add another import for Marker from react-google-maps and geocoder from google-geocoder.

import {GoogleMap, Marker, withGoogleMap} from 'react-google-maps';
import geocoder from 'google-geocoder';
const SimpleGoogleMap = withGoogleMap(props => (
<GoogleMap
googleMapUrl={googleMapUrl}
zoom={props.zoom}
center={props.center}
>
{props.markers.map((marker, index) =>
<Marker
position={marker.position}
/>
</GoogleMap>

The added Marker component will render a marker for each location point we have. Below is where we make the request to get each location and update the state, so the map component will re-render. I’ve cut out some of the code for readability.

const geo = geocoder({
key: API_KEY,
});
const groupMarkers = [];
...
//for each group location
geo.find(location, (err, res) => {
if (err) {
console.error(err);
} else {
const position = res[0].location;
groupMarkers.push(position);
});
this.setState({
markersLoaded: true,
});
...

And now our page looks like this:

If you want to improve the accuracy of the markers, I suggest checking out React Geosuggest and adding that to your input form. There’s so much more you can do once the markers are on the page. You can make them clickable and display information. You can have the map zoom in and out when you pick one. You can even customize the icon for the marker! Try it out!

)

Marina McGrath

Written by

Platform Integrations Engineer @ Lucid

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade