※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

次のページ>
【React + TS】ReactGoogleMapコンポーネントを使う-Part2

【React + TS】GoogleMapReactコンポーネントを使う-Part1

react web開発 フロント開発 GoogleCloud Google Maps Google Maps API TypeScript

投稿日:2021年3月28日

このエントリーをはてなブックマークに追加
ReactにはGoogle Mapを簡単に使用できるオープンソースのコンポーネント、GoogleMapReactがあります。この記事ではGoogleMapReactの使い方について解説しています。

はじめに

この記事について

この記事はGoogleMaps Javascript APIを使用します。まだAPIキーの取得ができていない方はまずそのキーを取得してください。
参考:Google Maps APIを使うまでの手順を詳しく解説

環境

  • npm version 6.14.4
  • node version 10.19.0

実践

まずはサンプルのプロジェクトを作成して必要なパッケージをインストールします。

ターミナル
$ npm init
$ npx create-react-app sample_app --template=typescript  # プロジェクトの作成
$ cd sample_app
$ npm install --save google-map-react
$ npm install --save-dev @types/google-map-react

サンプルの地図を表示するコンポーネントを作成してみます。
APIキーは自身が取得したGoogle Maps Javascript APIのAPIキーを入れてください。

./SampleComponent.tsx
import React, { useEffect, useState } from "react";
import GoogleMapReact from "google-map-react";

/**
 * Mapに使用するプロパティ
 */
interface MapProps {
  center: {
    lat: number;
    lng: number;
  };
  zoom: number;
}

/**
 * MapのPropsの初期値
 */
const initialMapProps: MapProps = {
  center: {
    lat: 35.39,
    lng: 139.44,
  },
  zoom: 18,
};

/**
 * APIキー
 */
const API_KEY = "********************"; // TODO: 自分のキーをここに入力

/**
 * サンプルとして地図を表示するコンポーネント
 */
const SampleMap = () => {
  const [mapProps, setMapProps] = useState<MapProps>(initialMapProps);
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: API_KEY }}
        center={mapProps.center}
        zoom={mapProps.zoom}
      />
    </div>
  );
};

export default SampleMap;
./App.tsx
import React from "react";
import SampleComponent from "./SampleComponent";

function App() {
  return (
    <div className="App">
      <SampleComponent />
    </div>
  );
}

export default App;

これで開発用サーバーを起動させれば地図が表示されるはずです。

ターミナル
$ npm run start
▲地図が表示される

defaultCenterとdefaultZoom

今回の例ではGoogleMapReactコンポーネントに渡すcenterとzoomをそのまま指定しているため、この値がnullになることはありません。
しかしもし、これらの値が親コンポーネントやAPIから与えられる場合は必ずデフォルトの値としてdefaultCenterとdefaultZoomを渡しておきましょう。

デフォルト値を渡す例
<GoogleMapReact
        bootstrapURLKeys={{ key: API_KEY }}
        defaultCenter={initialMapProps.center}
        center={mapProps.center}
        defaultZoom={initialMapProps.zoom}
        zoom={mapProps.zoom}
        onChange={changeMap}
      />
このエントリーをはてなブックマークに追加

次のページ>
【React + TS】ReactGoogleMapコンポーネントを使う-Part2

関連記事

記事へのコメント
    
検索