序章

Googleマップは、さまざまな構成設定をサポートするGoogleが提供する地図サービスです。 Googleマップをアプリケーションに追加すると、住所や座標のセットよりも多くのコンテキスト情報をユーザーに提供できます。

このチュートリアルは、Google Maps APIをReactコンポーネントに統合し、Webサイトに地図を表示できるようにすることを目的としています。

前提条件

このチュートリアルを完了するには、次のものが必要です。

注: Google Maps APIを使用するときに「開発目的のみ」のメッセージを回避するには、有効なクレジットカードを提供し、それをGoogleCloudProjectの請求先アカウントに関連付ける必要があります。このチュートリアルには必要ありません。

このチュートリアルは、ノードv14.2.0、npm v6.14.5、react v16.13.1、およびgoogle-maps-reactv.2.0.6で検証されました。

ステップ1—Reactアプリケーションのセットアップ

このチュートリアルでは、create-react-appを使用して新しいReactアプリのスキャフォールディングを行います。

まず、npxを実行して、ターミナルウィンドウでcreate-react-appを使用します。

  1. npx create-react-app react-googlemaps

次に、新しいプロジェクトディレクトリに移動します。

cd react-googlemaps

コードを追加する前に、次のコマンドを使用して依存関係をインストールしましょう。

  1. npm install google-maps-react@2.0.6

注:オプションで、この時点で不要なファイルを削除し、srcディレクトリにインポートできます。 logo.svgApp.cssindex.cssは必要ありません。 index.cssを削除する場合は、ビルドエラーを回避するために、index.htmlindex.cssimportも削除する必要があります。

この時点で、google-maps-reactライブラリを備えたReactアプリケーションができました。 これで、アプリケーションでマップを使用して探索できます。

ステップ2—MapおよびGoogleApiWrapperを使用する

次に、App.jsファイルを編集し、コードをGoogleマップをロードするコンポーネントに置き換える必要があります。

App.jsを開きます:

  1. nano src/App.js

App.jsの内容を次のコード行に置き換えます。

src / App.js
import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={
          {
            lat: -1.2884,
            lng: 36.8233
          }
        }
      />
    );
  }
}

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

注:YOUR_GOOGLE_MAPS_API_KEY_GOES_HEREをGoogleMapsJavasScriptAPIキーに置き換えてください。

警告: APIキーは、意図しない目的で他のユーザーが使用できるため、パブリックリポジトリ(GitHubなど)にコミットするファイルに保存しないでください。

基本的なGoogleマップの機能については、これが必要なすべてのコードです。

Mapコンポーネントは、いくつかのオプションの小道具を取り入れます。

  • style-CSSスタイルオブジェクト
  • zoom-マップの中心に焦点を合わせていることを表す数値
  • initialCenter-緯度と経度の座標を含むオブジェクト

この例では、次を定義しています。

  • 100%幅と100%高さのCSSスタイルオブジェクト
  • 14のズーム値
  • -1.2884, 36.8233の場所(ケニア、ナイロビのケニヤッタ国際コンベンションセンター)

ターミナルを開き、アプリを実行します。

  1. npm start

そして、マップがブラウザにロードされることを確認します。

Map displaying in the browser

GoogleApiWrapperは、Google APIのラッパーを提供する高次コンポーネント(HOC)です。 または、GoogleApiWrapper HOCは、ラップされたコンポーネントの小道具で呼び出され、次のように構成オブジェクトを返す関数を渡すことで構成できます。

export default GoogleApiWrapper(
  (props) => ({
    apiKey: props.apiKey
  }
))(MapContainer)

この時点で、ReactアプリケーションにGoogleマップがあります。 これで、Googleマップの他の機能の実装を検討できます。

ステップ3—MarkersおよびInfoWindowを使用する

ここで、MarkerInfoWindowをコードに追加します。

まず、MarkerおよびInfoWindowコンポーネントをgoogle-maps-reactライブラリからインポートして、2つのコンポーネントをロードできるようにする必要があります。

src / App.js
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

以前のコンポーネントはステートレスでしたか? 状態管理のために状態を追加する必要があります。

src / App.js
// ...

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false,  // Hides or shows the InfoWindow
    activeMarker: {},          // Shows the active marker upon click
    selectedPlace: {}          // Shows the InfoWindow to the selected place upon a marker
  };

  // ...
}

次に、MapMarkerがクリックされたときのイベントハンドラーを追加する必要があります。

src / App.js
// ...

export class MapContainer extends Component {
  // ...

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  // ...
}

onMarkerClickメソッドは、InfoWindowを表示するために使用されます。これは、google-maps-reactライブラリのコンポーネントであり、クリックされた[ X176X]