SAMURAI TERAKOYA

[ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法

React.js

Reactを用いたフロントエンド開発において、Google Map APIを活用したGoogle Mapの配置を行うこともあるかと思います。

しかし、Google Map APIのアクセスキーを取得するまでは良いですが、、公式で公開されているようにJavaScriptで記述・何かしらReactのパッケージを利用するなど色々と方法があるため悩ましいところですよね。。

そこで、今回は、 私が実際に業務で使用している@react-google-maps/api というパッケージを用いて、Google Mapの表示 / マーカーの表示 / マーカーのカスタマイズを行う方法についてご紹介していきます。

  1. Google Map API アクセスキーの取得
  2. @react-google-maps/apiのインストール
    1. インストール手順
  3. Google Mapの表示
  4. マーカーの表示
  5. マーカーのカスタマイズ
    1. Googleで公開されているアイコンを使用
    2. png,ico画像を読み込み
  6. まとめ

Google Map API アクセスキーの取得

Google Map APIのアクセスキーの取得についての詳細は、本記事上では省略します。

公式でも手順がご紹介されていますので、これから取得される予定の方は参考にしてみてください。

Geocoding API: API キーの取得  |  Google Maps Platform プレミアム プラン  |  Google for Developers
developers.google.com

@react-google-maps/apiのインストール

@react-google-maps/apiを使用すると、用意されたコンポーネントをJSX上に配置するだけでMapの表示をすることが出来たり、簡単にマーカーの配置・カスタマイズが出来たりします。

基本的にGoogle Map APIから提供されている機能は実装可能です。

インストール手順

@react-google-maps/apiのインストール

Google Mapの表示

Google Map_表示
  • 1
    @react-google-maps/apiをimport

    パッケージのインストールが完了したら早速、Reactのソース上でimport していきましょう。Google Mapを表示するうえで必要なGoogleMap, LoadScriptをApp.js上でimportします。

    import { GoogleMap, LoadScript } from "@react-google-maps/api";

  • 2
    Appコンポーネントを作成

    import文の下にAppコンポーネントを作成しましょう。

    const App = () => {
  return (
    <></>
  )
}
export default App;

  • 3
    地図のサイズと緯度経度を設定

    Google Mapコンポーネント内で、中心点を設定するための緯度経度と地図のサイズ(横幅と高さ)を定義します。

    const container = {
  width: "75%",
  height: "500px"
};

const position = {
  lat: 35.182253007459444,
  lng: 136.90534328438358
};

    latが緯度でlngが経度になります。今回は、名古屋城周辺の緯度/経度を設定してます。

  • 4
    JSX部分を記述

    続いて、JSX部分を記述していきます。

    LoadScriptコンポーネントでAPIキー(アクセスキー)を設定し、Google Mapコンポーネントでmapに関する設定及びmapの表示を行います。

    1. mapContainerStyle : 地図のサイズなどを設定
    2. center :  表示させるMapの中心点を設定
    3. zoom : マップのズームを設定(15以上20未満がちょうどいいかも)
    return (
  <>
    <h2>React_Google Map_Sample</h2>
    <div className="wrap">
      <LoadScript googleMapsApiKey="APIキー(アクセスキー)">
        <GoogleMap mapContainerStyle={container} center={position} zoom={15}>
        </GoogleMap>
      </LoadScript>
    </div>
  </>
)

  • 5
    App.cssの修正とimport

    デザインの修正をするため、App.cssを開きましょう。最初から書かれているコードをすべて削除したうえで、以下のコードを追加しましょう。

    .wrap {
  width: 100%;
  height: 500px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

h2 {
  text-align: center;
}　

    App.js上でApp.cssをimportし忘れると反映されませんので、ここをしっかりとやっておきましょう。

    import "../src/App.css"

  • 6
    Google Mapが表示されるか動作確認

    次のコマンドを実行し、サーバーを起動しましょう。

    npm start

    以下のように表示されることを確認出来ればOKです。

    React_GoogleMap_表示確認

マーカーの表示

React v.18以降は、Makerコンポーネントは使えないことはないのですが、マーカーの表示が上手くいきません。MakerFコンポーネントをimportするようにしましょう。
マーカーの表示
  • 1
    MakerFコンポーネントをimportする
    既に記述してあるimport文へMakerFの読み込みを追加しましょう。
    import { GoogleMap, LoadScript,MarkerF } from "@react-google-maps/api";
  • 2
    Google Mapコンポーネント内に配置
    やること自体は、とてもシンプルで、Google Mapコンポーネント内にMakerFコンポーネントを配置するだけです。
    1. position : マーカーを表示させたい場所の緯度/経度を設定
    2. label :  マーカーを表示させている場所のラベルを設定
    3. icon : マーカー画像のカスタマイズが可能
    return (
  <>
    <h2>React_Google Map_Sample</h2>
    <div className="wrap">
      <LoadScript googleMapsApiKey="APIキー(アクセスキー)">
        <GoogleMap mapContainerStyle={container} center={position} zoom={15}>
          <MarkerF position={position} label={"名古屋城"} />
        </GoogleMap>
      </LoadScript>
    </div>
  </>
)
  • 3
    Google Map上にマーカーが表示されているか確認
    以下のように表示されていればOKです。
    React_googlemap_maker_show

マーカーのカスタマイズ

前項でも少し触れましたが、MakerFコンポーネント内でicon属性にマーカー画像に設定したい画像を当てはめることで、画像の変更を行うことが出来ます。

Googleで公開されているアイコンを使用

一番シンプルなのは、Googleで公開されている画像を用いる方法になります。以下で確認が出来ますので、お好きなものを設定してみてください。

Google Map icon 一覧

使い方は、以下のようにMakerFコンポーネント内にicon属性をセットし、画像のURLを設定するだけです。

<MarkerF position={position} label={"名古屋城"} icon={"https://maps.google.com/mapfiles/kml/pal4/icon28.png"} />

このようにアイコン画像が変更されます。

React_googlemap_maker_iconchange

png,ico画像を読み込み

続いて、png,jpg,icoファイルを読み込む方法です。

以下のようにローカルファイルについてはrequire関数を使って読み込んであげる必要があります。(今回は、publicフォルダ内に元から入っているlogo192.png をsrcフォルダ直下へ移動させたうえで読み込んでいます。)

<MarkerF position={position} label={"名古屋城"} icon={require("./logo192.png")} />

ちょっと画像が大きいですが、、、以下のように画像を変更することが出来ます。

React_googlemap_maker_png

Google mapのほうで公開されているものは、縦長のアイコンが20×32, 正方形のアイコンが32×32で設定されているようなので、ここにあわせて画像を用意して頂くと丁度いい大きさになると思います。

まとめ

  • ReactやNextjsを用いた開発において、Google Map apiを使用したGoogle Mapの表示を行いたい場合は、@react-google-maps/api がオススメ！あまりGoogle Map apiの使い方に慣れていない人でも使いやすい。
  • マーカーのカスタマイズが出来るだけでなく、その他の機能を使うためのコンポーネントも用意されているので、自由にカスタマイズが出来る。
  • アクセスキーを取得した状態でないと使用できないので注意。
  • TypeScriptでも問題なく使用可能

コメント

タイトルとURLをコピーしました