Google Maps API for React 内の動的ポストイット

次の個人的なプロジェクトで何を作成するかはわかりませんでしたが、堅牢で機能が豊富な API を統合したいと考えていました。グーグルマップで行きました。

非常に広く使用されているため、Google と、そのサービスを実装した多くのジュニアおよびシニア プログラマーの両方から、豊富なドキュメントとチュートリアルがあります。

私は以前のプロジェクトで YouTube Data API を使用していたので、開発者用コンソールをセットアップしており、API キーを取得するための登録とプロセスに精通していました。ちなみに、これらの手順は非常に簡単です。

ごくわずかなコーディングといくつかのブログからの役立つヒントを参考にして、マップを新しい React プロジェクトに落とし込み、いくつかの機能の実験を開始しました。ステップバイステップのセットアッププロセスを文書化した多数の投稿には追加しませんが、触れます. 代わりに、特定の機能をどのように拡張したかについて説明します。

このサイトは、マップ コンポーネントのセットアップと実装に関する限り、React プロジェクトの優れたリソースです。@react-google-maps/api をインストールしたら、基本的な地図を追加する必要があるのは、それぞれ地図を読み込んで表示するための LoadScript コンポーネントと GoogleMap コンポーネントだけです。

これと同じくらい簡単です。デフォルトの外観を微調整するためにここに追加された小さな仕様のみがあることがわかります。

多くのマップベースのアプリが利用する一般的な機能は、通常は検索またはユーザー入力の結果である、関心のあるポイントを示す独特の赤いマーカーです。ほとんどの機能と同様に、マーカーは、Google マップ エコシステムのほんの一部を表す組み込みの小道具を多数備えたコンポーネントです。

多くの場合、マーカーの横には InfoWindows と呼ばれるポップアウト タグがあり、ユーザーがマーカーをクリックまたはスクロールするとテキスト情報が表示されます。これらの InfoWindow をより動的にして、ユーザーによる入力と削除を可能にし、それぞれがマーカーの一種のポストイット ノートのように機能するようにしたら面白いと思いました。

私の BaseMapContainer のマップ部分は次のとおりです。

ここですべてを説明するわけではありませんが、上記のコードはマップのデフォルトの外観を指定し (中心としてニューヨーク市のコロンバス サークルの座標を持っています)、ユーザーがマーカーをドロップしてから行動するための機能を作成します。それらの上に。

ユーザーが特定のマーカーを選択すると、情報ウィンドウに NotesContainer コンポーネントが含まれます。これは、入力フォーム、メモ リスト、およびメモを削除および編集するためのメモ コンポーネントで構成されます。また、マーカーの場所を小道具として渡すので、重要な情報はすべて 1 か所に保存されます。

洗練されていないスタイルで申し訳ありませんが、簡単なポストイット機能が実際に動作しています。

API ゲームに足を踏み入れたり、機能満載のシステムを試してみたいと考えている人にとって、Google Maps API は最適な場所です。