Google Mapを埋め込む
/help-jp/Location記法による地図の埋め込みを、オンプレ版でも有効にする方法
3つの環境変数を取得し、セットする
GOOGLE_MAP_API_KEY
GOOGLE_MAP_API_SIGNING_SECRET
GOOGLE_MAP_PLACES_API_KEY
これは2024/1/22から必要になりましたshokai.icon
どれもGoogle Cloud Platform(GCP) コンソールから作成、取得できます
GOOGLE_MAP_API_KEY
API Credentialを作成する
https://gyazo.com/75901a024818969d7cbe1305aa6e6e8d
Application restrictions
HTTP Referrers(website)を選択
使用APIは4つ
Maps Embed API
Maps JavaScript API
Maps Static API
Places API
Website restrictions
オンプレ版Scrapboxを動作させるURLを書く
https://gyazo.com/552f2a4a5afda3058a2ac1f32c53d9f4
このAPI keyはブラウザ側に露出する為、呼び出し元をreferrerで制限する必要がありますshokai.icon
Googleによる解説
https://developers.google.com/maps/documentation/maps-static/get-api-key#get_key
GOOGLE_MAP_API_SIGNING_SECRET
Static Map用を安全に埋め込む為の署名を作成
https://gyazo.com/89eadf7e81ac9add6f758a4ba0d7d5c1
Googleによる解説
https://developers.google.com/maps/documentation/maps-static/get-api-key#gen_sig
GOOGLE_MAP_PLACES_API_KEY
API credentialを作成する
使用APIは1つ
Places API
Application restrictions
Noneを選択
このAPI keyはブラウザ側に露出しません。呼び出し元の制限は不要ですshokai.icon
環境変数をセットする
code:docker-compose.yml
app:
image: ${IMAGE:-notainc/scrapbox}
environment:
APP_URL: 'https://your-host-name'
GOOGLE_MAP_API_KEY: 'google-api-key'
GOOGLE_MAP_API_SIGNING_SECRET: 'signing-secret'
GOOGLE_MAP_PLACES_API_KEY: 'google-places-api-key'
サーバーを起動しなおす
$ docker-compose down
$ docker-compose up
動作確認
こういうURLをペーストして
https://www.google.com/maps/place/東京タワー/@35.6576943,139.7452035,16z/data=!4m5!3m4!1s0x60188bbd9009ec09:0x481a93f0d2a409dd!8m2!3d35.6585799!4d139.7454339
https://www.google.com/maps/search/銭湯/@35.663094,139.7653944,14z?entry=ttu
ピンの付いた地図になればok
N35.6581963,E139.7430683,Z15 東京タワー
N35.663094,E139.7653944,Z14 銭湯