React で Google Map API : 全画面表示

作成：2023年7月1日

前回に引き続いて、機能追加してみます。
前回のコードをクローンして実行してみます。

Terminal

% npm install
% npm start

Map上に文字が表示されています。
.envファイルを作るのを忘れていましたので追加します。
ちゃんと Google Map が表示されました。

iPhoneシミュレーターで表示

URLを入力しようとしたら、「:」が入力できないので、ソフトウェアキーボードで入力しました。

「Toggle Software Keyboard」を使いました（ショートカットは下の画像）

iPhoneシミュレーターでも表示できました。

全画面表示

次の部分のコードを変更して Google Map を全画面表示します（Github:qiita20230701a)

App.js

import { GoogleMap, LoadScript, MarkerF } from '@react-google-maps/api';
import './App.css';

const containerStyle = {
  height: "100vh",
  width: "100%",
  // height: "500px"
};

const center = {
  lat: 35.681,
  lng: 139.781
}

const positionTokyoStation = {
  lat: 35.680959106959,
  lng: 139.76730676352
};

function App() {
  return (
    <>
      {/* <h2>React & Google Map</h2> */}
      <div className='wrap'>
        <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAP_API_KEY}>
          <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={15}>
            <MarkerF position={positionTokyoStation} label={"東京駅です"} />
          </GoogleMap>
        </LoadScript>
      </div>
    </>
  );
}

export default App;

全画面表示されました。

次回は、マーカをクリックしたらボトムシートを表示させたいと思います。

以上

参考

・React Google Maps Api Style Guide
・全画面表示
・吹き出しを設置する
・マーカーと吹き出し情報表示
・マーカーに画像を使う方法
・GoogleMapのInfoWindowのクリックイベントを取得する方法
・React.js Examples : Bottom Sheet
・多地点を回る際の最適ルートを表示