Google Maps APIのスクリプトタグのURLだけ変更してOpenStreetMapの地図を表示する

差し替え方法

Google Maps APIのスクリプトタグ1行をTablacus Maps APIのURLに置き換えるとLeafletを使ってOpenStreetMapの地図を表示します。

Google Maps API

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

上記の場合は以下の様に書き換えます。

Tablacus Maps API

<script async defer src="https://unpkg.com/tablacusmapsapi/tablacusmapsapi.js?alias=google&callback=initMap"></script>

1. 先頭の「http」から「?」までを「https://unpkg.com/tablacusmapsapi/tablacusmapsapi.js? 」に置き換え
2. 「key=YOUR_API_KEY」を「alias=google」に置き換え
3. その他の部分はそのままコピーします。上記の例では「callback=initMap」

この方法のメリット

• Google Maps APIの地図を簡単にOpenStreetMapに切り替えることができる。
• タグ1行を元に戻すだけでGoogle Maps APIに戻すことができる。

サンプルページ

Tablacus Maps API

ソース(GitHub)

Yet another Maps API with leaflet (OpenStreetMap)