React Tutorial for Google Map Places library

Jeff Chiu — Mon, 28 May 2018 06:13:03 GMT

Hi.

Another day I was learning how to implement Google Map Places API to my React App. And I found this tutorial created by Ari Lerner very helpful. That I decide to cite a lot of his open source github website fullstackreact.com and build a tutorial based on that.

Tutorial: Intro To React Google Map

What We’re Building

Today, we’re going to build a simple React App with Google Map API

If you like, you can check out the final result here:

Fullstack React: How to Write a Google Maps React Component

Resources come from fullstackReact

fullstackreact/google-maps-react

Prerequisites

We’ll assume some familiarity with HTML and JavaScript, but you should be able to follow along even if you haven’t used them before.

If you need a refresher on JavaScript, we recommend reading this guide. Note that we’re also using some features from ES6, a recent version of JavaScript. In this tutorial, we’re using arrow functions, classes, let, and const statements. You can use the Babel REPL to check what ES6 code compiles to.

Table of Contents

Dragging the Map Around with addListener

Since we have our Map component set, the we can interact with it in a lot of ways. The google map api is rich with opportunities for handling events that happen within the map (just check out the extensive documentation). We can set up callbacks to call when these events occur within the map instance itself.

For instance, when the google map has been moved or dragged around, we can fire a callback. For instance, let’s set up a callback to run when the map itself has been dragged around.

To add event handlers, we need the map to be listening for events. We can add listeners pretty easily with the Google API using the addListener() function on our Map.

After we create our map, in the loadMap() function, we can add our event listeners. Let's handle the dragend event that will be fired when the user is done moving the map to a new location.

export class Map extends React.Component {
  loadMap() {
    if (this.props && this.props.google) {
      // ...
      this.map = new maps.Map(node, mapConfig);

      this.map.addListener('dragend', (evt) => {
        this.props.onMove(this.map);
      })
    }
    // ...
  }
}
Map.propTypes = {
  // ...
  onMove: React.PropTypes.func
}
Map.defaultProps = {
  onMove: function() {} // default prop
}

When our user is done moving around the map, the dragend event will be fired and we'll call our onMove() function we passed in with the props.

One issue with the way we’re handling callbacks now is that the dragend event is fired a LOT of times. We don't necessarily need it to be called every single time it's dragged around, but at least once at the end. We can create a limit to the amount of times we'll call the onMove() prop method by setting up a simple timeout that we can clear when the event is fired again.

export class Map extends React.Component {
  loadMap() {
    if (this.props && this.props.google) {
      // ...
      this.map = new maps.Map(node, mapConfig);

      let centerChangedTimeout;
      this.map.addListener('dragend', (evt) => {
        if (centerChangedTimeout) {
          clearTimeout(centerChangedTimeout);
          centerChangedTimeout = null;
        }
        centerChangedTimeout = setTimeout(() => {
          this.props.onMove(this.map);
        }, 0);
      })
    }
    // ...
  }
}

Handling More Events

Although we are only handling the dragend event above, we can handle other events as well in a similar fashion, but this can get really cumbersome, really fast. We can be a little bit more clever and more programatic about building our interactivity into our component.

Let’s say we want to handle two events, the dragend event and the click event. Rather than copy+pasting our code from above for every single event, let's build this up programmatically.

First, let’s create a list of the events we want to handle:

const evtNames = ['click', 'dragend'];

With our evtNames list, let's replace our addListener() funcitonality from above with a loop for each of the evtNames:

export class Map extends React.Component {
  loadMap() {
    if (this.props && this.props.google) {
      // ...
      this.map = new maps.Map(node, mapConfig);

      evtNames.forEach(e => {
        this.map.addListener(e, this.handleEvent(e));
      });
    }
    // ...
  }

  handleEvent(evtName) {

}
}

As the addListener() function expects us to return an event handler function, we'll need to return a function back, so we can start our handleEvent() function like:

export class Map extends React.Component {
  handleEvent(evtName) {
    let timeout;
    return (e) => {
      // ...
    }
  }
}

We’ll basically copy+paste our timeout functionality into our new handleEvent()function.

export class Map extends React.Component {
  handleEvent(evtName) {
    let timeout;
    const handlerName = evtName;

    return (e) => {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      timeout = setTimeout(() => {
        if (this.props[handlerName]) {
          this.props[handlerName](this.props, this.map, e);
        }
      }, 0);
    }
  }
}

Now, any time we pass a prop with the event name, like click it will get called whenever we click on the map itself. This isn't very React-like, or JS-like for that matter. Since it's a callback, a better naming scheme would be onClick and onDragend.

Since we’re going meta in the first place, let’s make our propName be a camelized word starting with on and ending with the capitalized event name.

A simple camelize() helper function might look something similar to:

const camelize = function(str) {
  return str.split(' ').map(function(word){
    return word.charAt(0).toUpperCase() + word.slice(1);
  }).join('');
}
camelize('i love you'); // ILoveYou
camelize('say hello'); // SayHello

With our camelize() helper function, we can replace the handlerName from our handleEvent function:

export class Map extends React.Component {
  handleEvent(evtName) {
    let timeout;
    const handlerName = `on${camelize(evtName)}`;

    return (e) => {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      timeout = setTimeout(() => {
        if (this.props[handlerName]) {
          this.props[handlerName](this.props, this.map, e);
        }
      }, 0);
    }
  }
}

Lastly, because we are good React-citizens, let’s add these properties to our propTypes:

evtNames.forEach(e => Map.propTypes[camelize(e)] = T.func)

Handling Custom Events on Map

We can also fire our own custom events along with the google map instance. Allowing us to listen for our own custom events is an incredibly useful feature that gives us the ability to react to custom functionality using the same event handling mechanism we just set up.

An example of this is giving the our callback to trigger a ready event.

Let’s add the 'ready' string to our evtNames so we handle the onReady prop (if passed in):

const evtNames = ['ready', 'click', 'dragend'];

To trigger an event, like the ready event we can use the google.maps.event object's trigger() function.

For handling the case after the map is ready (at the end of our loadMap() function), we can call the trigger() function on the map instance with the event name.

export class Map extends React.Component {
  loadMap() {
    if (this.props && this.props.google) {
      // ...
      this.map = new maps.Map(node, mapConfig);

      evtNames.forEach(e => {
        this.map.addListener(e, this.handleEvent(e));
      });

      maps.event.trigger(this.map, 'ready');
    }
    // ...
  }
}

Since we’ve already set the rest of the event handlers up, this will just work.

Adding Markers to the Map

What good is a Google Map without markers indicating location spots on the map, eh? Let’s add a method for our users to place a marker on our map. We could set up our Map component to accept a list of places and be responsible for setting up the markers itself, or we can build the Map component in the React Way and build custom components to manipulate the calendar as children.

Let’s build a MarkerComponent using the React Way. As we previously did, let's build the usage first and then build the implementation.

The React Way is to write our Marker components as children of the Map component.

export class Container extends React.Component {
  render() {
    const style = {
      width: '100vw',
      height: '100vh'
    }
    const pos = {lat: 37.759703, lng: -122.428093}
    return (
      
        
          
          
        
      

    )
  }
}
// ...

We’ll build our component as a child of the Map component so that they are independent of the Map itself, but still can be interdependent upon the Mapcomponent being available.

When we place a inside the component, we'll want to pass through some custom props that the Map contains, including the map instance object to it's children.

React gives us a convenient method for handling updating the props of children objects of a component. First, let’s update our Map.render() method to include rendering children:

In this post, we’ll look at how we to connect the Google API and build a Google Maps Component.

Demo

Before we can integrate with Google Maps, we’ll need to sign up at Google to get an API key.

Show For more information about signing up for a Google Key of your own, check the instructions here.

Loading a Google-based Component

In order to use Google within our components, we’ll need to handle two technical boundaries:

Loading the Google API
Handling access to the Google API within our components.

Our goal here is to create an independent component that can handle these two tasks for us. Let’s build a GoogleApiComponent to handle taking care of this for us (alternatively, we've wrapped this into an npm module ( google-maps-react). Feel free to grab this npm module and head to the next section).

With our key in hand, we’ll need to load up the Google API on our page. We can handle this in multiple ways, including directly including the

Stories by Jeff Chiu on Medium