---

---

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

投稿日：2021年3月28日

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

---

はじめに

この記事について

環境

---

実践

$ 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

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;

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
        bootstrapURLKeys={{ key: API_KEY }}
        defaultCenter={initialMapProps.center}
        center={mapProps.center}
        defaultZoom={initialMapProps.zoom}
        zoom={mapProps.zoom}
        onChange={changeMap}
      />

---

---

---