React Google Maps APIを使った地図の表示とマーカーの追加方法

必要なパッケージのインストール: React Google Maps APIを使用するには、まずnpmパッケージをインストールします。ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します:
```
npm install @react-google-maps/api
```
APIキーの取得: Google Cloud PlatformでAPIキーを取得します。Google マッププラットフォームを有効化し、APIキーを生成します。APIキーは、後でReactアプリケーションで使用します。

Reactコンポーネントの作成: Reactアプリケーション内で地図を表示するためのコンポーネントを作成しましょう。以下のようなコードを追加します:

import React from 'react';
import { GoogleMap, Marker } from '@react-google-maps/api';
const MapContainer = () => {
 const mapContainerStyle = {
   width: '100%',
   height: '400px',
 };
 const center = {
   lat: 37.7749,
   lng: -122.4194,
 };
 return (
   <GoogleMap
     mapContainerStyle={mapContainerStyle}
     center={center}
     zoom={10}
   >
     <Marker position={center} />
   </GoogleMap>
 );
};
export default MapContainer;

APIキーの設定: 先ほど取得したAPIキーを使用するために、Reactアプリケーション内でAPIキーを設定します。以下のようにコードを追加します:

import { GoogleMapProvider } from '@react-google-maps/api';
const App = () => {
 const apiKey = 'YOUR_API_KEY';
 return (
   <GoogleMapProvider>
     <MapContainer />
   </GoogleMapProvider>
 );
};
export default App;

マーカーのカスタマイズ: マーカーをカスタマイズするには、Markerコンポーネントのiconプロパティを使用します。以下は例です:
```
const markerIcon = {
 url: '/path/to/custom-marker.png',
 scaledSize: new window.google.maps.Size(50, 50),
};
// ...
<Marker position={center} icon={markerIcon} />
```

以上がReact Google Maps APIを使用して地図を表示し、マーカーを追加する基本的な手順です。必要に応じて、さらに機能を追加したり、マップのインタラクティブな操作を実装したりすることもできます。