Google Pickerを使って場所（緯度・経度）を選択させる https://blog.r3it.com/google-picker-map-81ad931d5bd0

Picker.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import loadScript from "load-script";

let scriptLoadingStarted = false;

export default class GoogleChooser extends React.Component {
  static propTypes = {
    children: PropTypes.node,
    onChange: PropTypes.func,
    createPicker: PropTypes.func
  };

  static defaultProps = {
    onChange: () => { }
  };

  constructor(props) {
    super(props);

    this.onApiLoad = this.onApiLoad.bind(this);
    this.onChoose = this.onChoose.bind(this);
  }

  componentDidMount() {
    if (this.isGoogleReady()) {
      this.onApiLoad();
    } else if (!scriptLoadingStarted) {
      scriptLoadingStarted = true;
      loadScript("https://apis.google.com/js/api.js", this.onApiLoad);
    }
  }

  onApiLoad() {
    window.gapi.load("picker");
  }

  onChoose() {
    if (!this.isGoogleReady() || !this.isGooglePickerReady()) {
      return null;
    }
    this.createPicker();
  }

  isGoogleReady() {
    return Boolean(window.gapi);
  }

  isGooglePickerReady() {
    return Boolean(window.google.picker);
  }

  createPicker() {
    const picker = new window.google.picker.PickerBuilder()
      .addView(google.picker.ViewId.MAPS)
      .setLocale("ja")
      .setCallback(this.props.onChange)
      .build()
      .setVisible(true);
  }

  render() {
    return (
      <div onClick={this.onChoose}>
        {
          this.props.children ?
            this.props.children :
            <button>Pickerを開く</button>
        }
      </div>
    );
  }
}