Google Mapをブログに貼る
Date:2008.09/14 [Sun]15:26 | Category:[TIPS]
アルキカタサイトのほうに「Google Mapをブログに貼りたい」という質問がありました。結構需要がありそうです。調べてみました。
記事内に地図を貼り付ける方法と、記事内に置いたリンクをクリックして別のウインドウを開いたりポップアップさせたりという方法があります。
Google マップを自分のサイトに貼り付けよう
グリニッジ天文台(Royal Greenwich Observatory):
大きな地図で見る
明石天文台:
大きな地図で見る
手順:
(1)Google Mapを開きます。
http://maps.google.co.jp/maps
(2)検索ウィンドウに検索したい場所の住所や場所の名前、店名などを入力して検索します。
(3)検索結果の右上の[リンク]をクリック。

(4)「HTMLを貼り付けてサイトに地図を埋め込みます」の下の<iframe~で始まるタグをコピー
(5)ブログの本文や追記にペースト。
これで記事内に地図を表示することができます。もちろんフリーエリアプラグインに貼り付けて、サイドバーに表示するということも可能です。
地図の大きさは大(640×480)中(425×350)小(300×300)またはカスタム(自分で設定可能)。通常は中に設定されています。変更するには、[埋め込み地図のカスタマイズとプレビュー]をクリックすると設定ウインドウが表示されるので、そこで選択して設定します。

ブログの雰囲気として地図を貼るというのではない、といった場合は、単純に[リンク]の
「このリンクをメールに貼り付けて地図を共有できます」のアドレスをブログ本文にリンクとして書き込む方法もあります。
Google Map:グリニッジ天文台
でも、それだと、別に大きな地図のGoogle Mapのページが開いて、もっと雰囲気がそがれちゃう。というときには、スクリプトでブログ上に小さな地図をポップアップさせるのはいかがでしょう。
TEDDY本家:"G2Gmap"で超簡単にブログにGoogle Mapsを貼ってみる
グリニッジ天文台:Greenwich Park, SE10 8QY
明石天文台:兵庫県明石市人丸町2-6
スクリプトタグも記事内に書けば良いので、お手軽です(ただしJavaScriptがオフになっていると、ただの文字列でリンクにもなりません。通常ブログを閲覧するユーザはオンにしていることが多いですし、オフにしているユーザは必要に応じてオンにするかどうか判断するため、あまり心配は要りません)。
*1 W3G XHTML HTML辞典 :
このスクリプトには、MSN相談箱 地図をブログに載せるには?からsatokotoさんのブログの記事(これは古いもので現在は利用できません)を経てたどり着きました。
記事内に地図を貼り付ける方法と、記事内に置いたリンクをクリックして別のウインドウを開いたりポップアップさせたりという方法があります。
記事内にぺたりと地図を貼る
Google マップを自分のサイトに貼り付けよう
グリニッジ天文台(Royal Greenwich Observatory):
大きな地図で見る
明石天文台:
大きな地図で見る
手順:
(1)Google Mapを開きます。
http://maps.google.co.jp/maps
(2)検索ウィンドウに検索したい場所の住所や場所の名前、店名などを入力して検索します。
(3)検索結果の右上の[リンク]をクリック。

(4)「HTMLを貼り付けてサイトに地図を埋め込みます」の下の<iframe~で始まるタグをコピー
(5)ブログの本文や追記にペースト。
これで記事内に地図を表示することができます。もちろんフリーエリアプラグインに貼り付けて、サイドバーに表示するということも可能です。
地図の大きさは大(640×480)中(425×350)小(300×300)またはカスタム(自分で設定可能)。通常は中に設定されています。変更するには、[埋め込み地図のカスタマイズとプレビュー]をクリックすると設定ウインドウが表示されるので、そこで選択して設定します。

スクリプトを利用してポップアップさせる
ブログの雰囲気として地図を貼るというのではない、といった場合は、単純に[リンク]の
「このリンクをメールに貼り付けて地図を共有できます」のアドレスをブログ本文にリンクとして書き込む方法もあります。
<a href="(コピーしたアドレス)" title=*1"(ツールチップで示したい文字列)">(リンクしたい文字列)</a>
Google Map:グリニッジ天文台
でも、それだと、別に大きな地図のGoogle Mapのページが開いて、もっと雰囲気がそがれちゃう。というときには、スクリプトでブログ上に小さな地図をポップアップさせるのはいかがでしょう。
TEDDY本家:"G2Gmap"で超簡単にブログにGoogle Mapsを貼ってみる
グリニッジ天文台:Greenwich Park, SE10 8QY
明石天文台:兵庫県明石市人丸町2-6
スクリプトタグも記事内に書けば良いので、お手軽です(ただしJavaScriptがオフになっていると、ただの文字列でリンクにもなりません。通常ブログを閲覧するユーザはオンにしていることが多いですし、オフにしているユーザは必要に応じてオンにするかどうか判断するため、あまり心配は要りません)。
*1 W3G XHTML HTML辞典 :
title属性は、ある要素に対して補足情報を付け足す属性です。
このスクリプトには、MSN相談箱 地図をブログに載せるには?からsatokotoさんのブログの記事(これは古いもので現在は利用できません)を経てたどり着きました。
- Tag List
- [地図]
- [Google_Map]
- [API]
お、これいいですね