手っ取り早く地図を埋め込みたいときによくGoogleマップを使用します。
目的地にピンを表示したい場合は、一度検索をかけてピンを表示させた状態でiFrameタグを取得すれば、埋め込みGoogle Mapに目的地のピンを表示させられるようになります。
iFrame埋め込みは便利だけど
上記のように、Google Mapでは非常に簡単に、目的地情報の入った埋め込み用iFrameタグを取得できます。
とても便利ですが、あらかじめ目的地がはっきりしている場合じゃないと使えないのが難点ですね。
CMSに組込んで、でクライアント様にマップを設定していただくような場合は、この方法では厳しいです。
検索ワードを組み込んだiFrame
そんな時は、iFrameのsrc属性に、検索ワードを埋め込んだURLを設定することで、自動的に目的地にピンが入ったマップを表示することができます。
※API KEYが必要なので、試したい方はまずAPI KEYを取得してください。
<iframe src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=検索ワード width="400" height="300" allowfullscreen></iframe>
ポイントは、URLがgoogle.com/maps/embedで終わらず、google.com/maps/embed/v1/place と少し長くなっているところ。
この後にクエリでkeyにAPI KEYを、qに検索ワードを指定すれば、あとは通常のiFrameと同じように使用できます。
CMSに組込む場合は、検索ワードを入力するフォームを用意して、入力後に検索ワードが入ったiframeを出力するようなスクリプトを作ればOKです。
OLDER
