Google Mapsが簡単埋め込みを開始！
Google Mapsといえば、以前からサイトへの埋め込みが可能でしたが、埋め込むためには認証キーを取得して、JavaScriptでコーディングする必要がありました。
Twitter経由でGoing My Wayのkengoさんから教えてもらったのですが、YouTubeのビデオを埋め込むような感じで簡単に地図を埋め込めるようになったようです。
Going My Way
地図を手軽に自分のサイトやブログに貼り付けられるようになった Google Maps の埋め込み地図機能
※テストをかねて大量の地図をページに貼り込んでいるので、ブラウザのフリーズ注意です！
kengoさんのページを見るとただの地図から検索結果、自分で作成したMy Mapsまで、Google Mapsで表示できる地図はすべて張り込みが可能なので、色々使い勝手が良さそうです。
せっかくなので、以前個人的Podcastで夜景撮影ドライブしたときに作ったMy Mapsを貼り付けてみます。
まずはGoogle Mapsにアクセスして、地図を表示。
地図の右上の「このページのリンク」をクリックすると、これまではリンク用URLしか表示されませんでしたが、その下に埋め込みようのタグも表示されます。
せっかくなので、地図のカスタマイズもしてみます。
タグのすぐ下にある「埋め込み地図のカスタマイズとプレビュー」をクリック。
新規ウィンドウが開いて、地図の大きさを選択できます。
大きさは大中小から選択もしくはカスタムでwidth/heightの値を指定。
大中小の各サイズ設定は以下の通り。
- 大：width:640px, height:480px
- 中：width:425px, height:350px
- 小：width:300px, height:300px
このサイズはiframeタグのwidth属性とheight属性を変更しているだけのようです。
なので、わざわざカスタマイズをクリックしなくても、デフォルトで表示されるタグをコピペして、自分でiframeのwidthとheightを触ってやるだけでOK。
サイズを中にして貼り付けるとこんな感じ。
