svelte-google-maps-api

概要

Google Maps を Svelte のコンポーネントとして書けるようにするライブラリです。APIProvider で API を読み込み、その中に地図・マーカー・クラスタリング・情報ウィンドウ・図形・ルート検索・Places の入力補助・各種レイヤー・ストリートビューを、タグを並べる感覚で組み合わせられます。

<script lang="ts">
  import { APIProvider, GoogleMap, Marker } from "svelte-google-maps-api";
</script>

<APIProvider apiKey={import.meta.env.PUBLIC_MAPS_KEY}>
  <GoogleMap options={{ center: { lat: 36.08, lng: 140.11 }, zoom: 12 }}>
    <Marker position={{ lat: 36.08, lng: 140.11 }} />
  </GoogleMap>
</APIProvider>

設計で気にしたこと

• 読み込みの扱い：APIProvider がスクリプトの読み込みとコンテキストの提供を受け持ち、子のコンポーネントは読み込みが済むまで Google Maps のオブジェクトを作りません。必要なライブラリ（places や marker など）も APIProvider に渡すだけで済みます。
• SvelteKit との相性：Google Maps の読み込みはクライアント側で行い、SSR のあるルートで使うときの書き方もドキュメントにまとめています。
• 網羅性：Marker から Street View まで、Maps JavaScript API の主要な機能をコンポーネントとして揃えています。
• ドキュメント：使い方とコンポーネントごとのデモを GitHub Pages で公開しています。