AdvancedMarkerを利用するGoogleマップの表示

WebページにGoogleマップの表示について気になる点をメモする

背景

@react-google-maps/apiはGoogle Maps Apiを使いやすいラッパーですが、最近はメンテが遅れている印象で、その中の１つ例でとして「google.maps.Marker」が非推奨になったにも関わらず、後続の「google.maps.marker.AdvancedMarkerElement」を利用するコンポーネントが提供されていない。

新たな選択肢

@vis.gl/react-google-mapsはAdvancedMarkerElementを利用するAdvancedMarkerコンポーネントがあるので、それを使うようにする

気になるポイント

• docsを見るだけいけるので、意外に使いやすい
• マップを描画する親divにサイズを指定する必要がある
  • 指定しないと高さが0、非表示になる
  • 親divの空間を全て埋める
• AdvancedMarker
  • デフォルトは以前の表示のまま（@react-google-maps/apiのMarker）
  • 色々カスタマイズできる
  • 親のマップにIDの設定が必須になる
    • 'DEMO_MAP_ID'またはgoogle couldで発行したまともうなマップID、どちらもOK

サンプルコード

import type { FC } from 'react';
import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps';

type Props = {
  lat: number;
  lng: number;
};

export const Hoge: FC<Props> = ({lat, lng}) => {
  return (
    <div style={{ width: 120, height: 120 }}>
        <APIProvider apiKey={process.env.googleMapsApiKey}>
          <Map
            center={{ lat, lng }}
            zoom={5}
            mapId="DEMO_MAP_ID"
          >
            <AdvancedMarker position={{ lat, lng }} />
          </Map>
        </APIProvider>
    </div>
  )
};

参考

• AdvancedMarker