web制作の備忘録(仮)

web制作の備忘録。たくさん勉強したいです。

Google Maps Embed API

Google Mapの埋め込み表示を少しカスタマイズしたいけどJavaScriptに自信がない人に優しい「Google Maps Embed API

アクセスページに必ずと言っていい程埋め込んできたGoogle Mapですが、最近になって初めて「Google Maps Embed API」を知りました。

developers.google.com

Google Maps JavaScript API」よりハードルが低くてありがたい

今までマップを埋め込む際は

  1. 単純にピンが一つ落ちたマップを表示させたいときは、マップ画面の共有ボタン→出て来た埋め込みコードをコピペ

  2. 上記の方法では事足りない場合(例えば、複数のピンを落としたい、吹き出しをつけたい、ピンの画像を差し替えたい、ルートを表示したい等のカスタマイズをしたい時)は「Google Maps JavaScript API」を利用して作成したファイルをiframで埋め込み

のどちらかでしか対応してきませんでした。

が!「Google Maps Embed API」は上記の1のような手軽さでほどほどに2のようなカスタマイズができるようで、見つけたときはとても感動しました!JavaScriptを使わず、iframのsrc属性をいじるだけなのがすごく優しいです。易しい

結構前からあるようですね、、、

使い方はこちら