React で Google Map API : 全画面表示

作成：2023年7月1日

[前回](https://qiita.com/RYO_/items/a6ab43aa4802d25dee6b)に引き続いて、機能追加してみます。
[前回のコード](https://github.com/ryoyuki6/map20230611/tree/qiita20230611)をクローンして実行してみます。
```:Terminal
% npm install
% npm start
```

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/4200adb8-a424-89df-3133-449146f6d933.png">

Map上に文字が表示されています。
[.envファイルを作る](https://qiita.com/RYO_/items/a6ab43aa4802d25dee6b#4-%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AB-google-map-api-key%E3%82%92%E8%BF%BD%E5%8A%A0)のを忘れていましたので追加します。
ちゃんと Google Map が表示されました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/5bc747ab-c837-40f0-1076-7e8fb86b12bc.png">

# iPhoneシミュレーターで表示
URLを入力しようとしたら、「:」が入力できないので、ソフトウェアキーボードで入力しました。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/c456b04f-bf16-e826-2824-47e74ac1a7cc.png">
「Toggle Software Keyboard」を使いました（ショートカットは下の画像）
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/53ec2218-1c85-3f7f-1ae8-ab1b2d2c1bdd.png">
iPhoneシミュレーターでも表示できました。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/b825ca1d-b27b-668e-ce79-860015ff7a06.png">



# 全画面表示
次の部分のコードを変更して Google Map を全画面表示します（[Github:qiita20230701a](https://github.com/ryoyuki6/map20230611/tree/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;
```
全画面表示されました。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/19adcbb5-36e6-c6f4-62f8-671924a47df5.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/b28bf317-79a5-e817-cf29-2e29c9aea0cb.png">


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

以上

# 参考
・[React Google Maps Api Style Guide](https://react-google-maps-api-docs.netlify.app/)
・[全画面表示](https://dev.classmethod.jp/articles/launching-a-map-app-using-react-google-maps-api-locally/)
・[吹き出しを設置する](https://zenn.dev/t_kitamura/articles/423f023bffe0e1#%E5%90%B9%E3%81%8D%E5%87%BA%E3%81%97%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B)
・[マーカーと吹き出し情報表示](https://qiita.com/theFirstPenguin/items/dc94aeb1595df1a0aa56#%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%A8%E6%83%85%E5%A0%B1%E3%81%AE%E8%A1%A8%E7%A4%BA)
・[マーカーに画像を使う方法](https://utubou-tech.com/react-google-maps/)
・[GoogleMapのInfoWindowのクリックイベントを取得する方法](https://hryktrd.hatenablog.com/entry/2019/03/26/100925)
・[React.js Examples : Bottom Sheet](https://reactjsexample.com/tag/bottom-sheet/)
・[多地点を回る際の最適ルートを表示](https://qiita.com/theFirstPenguin/items/dc94aeb1595df1a0aa56#%E5%A4%9A%E5%9C%B0%E7%82%B9%E3%82%92%E5%9B%9E%E3%82%8B%E9%9A%9B%E3%81%AE%E6%9C%80%E9%81%A9%E3%83%AB%E3%83%BC%E3%83%88%E3%82%92%E8%A1%A8%E7%A4%BA)