はじめに ReactとGoogle mapをつかったアプリを作成した際、初学者が参考となる資料が思いの外少なかったので、本記事を投稿いたしました。 本記事では、2020/7月現在、最もアクティブかつ使いやすいと思われる@react-google-maps/apiを使用しています。 このライブラリは、Google Maps API機能を広くカバーしており、Reactコンポーネントとして提供してくれているのでとても便利です。感謝。 今回ご紹介する機能 Mapコンポーネントの描画 マーカーと情報の表示 マーカーアイコンのクラスター表示 多地点を回る際の最適ルートを表示 事前準備 GoogleMapのAPIキーを取得 Map関連のGoogleAPI(今回はMaps JavaScript APIとDirections API)を有効化 Mapの描画 基本となるGoogleMapを描画するMapコンポ