Next.jsでGoogleマップを表示させるコンポーネント

2024/01/21

Google MAPのタグをどうやってNext.jsで読み込めせようか調べていたところ、
Next.js公式で@next/third-partiesというライブラリを提供していたので、
その使い方を紹介しようと思います。

@next/third-partiesは、Next.jsアプリケーションで一般的なサードパーティライブラリの読み込みパフォーマンスと開発者エクスペリエンスを向上させるためのコンポーネントとユーティリティのコレクションを提供するライブラリです。

@next/third-partiesが提供するすべてのサードパーティの統合は、パフォーマンスと利便性の向上のために最適化されています。

インストール

はじめるには、@next/third-partiesライブラリをインストールします。

npm install @next/third-parties@latest next@latest

@next/third-partiesは現在実験的なライブラリであり、積極的に開発が進行中です。より多くのサードパーティの統合を追加する作業中ですので、最新またはキャナリーフラグを使用してインストールすることをお勧めします。

Google Maps Embedコンポーネント

GoogleMapsEmbedコンポーネントを使用すると、ページにGoogle Maps Embedを追加することができます。
デフォルトでは、埋め込みを下部で遅延読み込みするためにloading属性を使用します。

// app/page.js

import { GoogleMapsEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

Google Maps Embedのオプション

Google Maps Embedに渡すオプションのリストについては、次のとおりです。

apiKey (必須): あなたのAPIキー。
mode (必須): マップモード。
height (オプション): 埋め込みの高さ。デフォルトはautoです。
width (オプション): 埋め込みの幅。デフォルトはautoです。
style (オプション): iframeにスタイルを適用します。
allowfullscreen (オプション): 特定のマップパーツをフルスクリーンに許可するプロパティ。
loading (オプション): lazyにデフォルトで設定されています。埋め込みが上部であることを知っている場合は変更を検討してください。
q (オプション): マップマーカーの場所を定義します。マップモードによっては必要な場合があります。
center (オプション): マップビューの中心を定義します。
zoom (オプション): マップの初期ズームレベルを設定します。
maptype (オプション): 読み込む地図タイルのタイプを定義します。
language (オプション): UI要素や地図タイル上のラベルの表示に使用する言語を定義します。
region (オプション): 地政学的な感受性に基づいて表示する適切な境界とラベルを定義します。