FC2ブログの歩き方ブログ

FC2ブログユーザを応援します。「バックアップとろうよキャンペーン」実施中。トラックバック大歓迎

Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • TB(-) |
  • CO(-) 
  • [Edit
  • [No Tag]

Google Mapをブログに貼る

アルキカタサイトのほうに「Google Mapをブログに貼りたい」という質問がありました。結構需要がありそうです。調べてみました。
記事内に地図を貼り付ける方法と、記事内に置いたリンクをクリックして別のウインドウを開いたりポップアップさせたりという方法があります。

記事内にぺたりと地図を貼る



Google マップを自分のサイトに貼り付けよう

グリニッジ天文台(Royal Greenwich Observatory):

大きな地図で見る

明石天文台:

大きな地図で見る

手順:

(1)Google Mapを開きます。
http://maps.google.co.jp/maps

(2)検索ウィンドウに検索したい場所の住所や場所の名前、店名などを入力して検索します。

(3)検索結果の右上の[リンク]をクリック。
Google_Map_link1

(4)「HTMLを貼り付けてサイトに地図を埋め込みます」の下の<iframe~で始まるタグをコピー

(5)ブログの本文や追記にペースト。

これで記事内に地図を表示することができます。もちろんフリーエリアプラグインに貼り付けて、サイドバーに表示するということも可能です。

地図の大きさは大(640×480)中(425×350)小(300×300)またはカスタム(自分で設定可能)。通常は中に設定されています。変更するには、[埋め込み地図のカスタマイズとプレビュー]をクリックすると設定ウインドウが表示されるので、そこで選択して設定します。

Google_Map_link2

スクリプトを利用してポップアップさせる



ブログの雰囲気として地図を貼るというのではない、といった場合は、単純に[リンク]の
「このリンクをメールに貼り付けて地図を共有できます」のアドレスをブログ本文にリンクとして書き込む方法もあります。
<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さんのブログの記事(これは古いもので現在は利用できません)を経てたどり着きました。
スポンサーサイト

Comment[この記事へのコメント]

お、これいいですね 

ちょうど書きかけの記事で使えそうなので、試してみようと思います。
  • schutz 
  • URL 
  • at 2008.09.14 14:46 
  • [編集]

おっと 

書きかけのときにコメントいただいたみたいです。お役に立てるかな?後で見に行きまーす。
  • sugar 
  • URL 
  • at 2008.09.14 15:27 
  • [編集]

あ、ほんとだ 

記事が増えてる(笑)。
小さな地図をポップアップというのが良さそうだったんですが、これって住所にしか対応していないみたいですね。地名で検索できないポイントを表示したいので、どうしたものか。
緯度経度に対応したものを探すか、簡単に改造できますかねー。ちょっと検討してみます。
  • schutz 
  • URL 
  • at 2008.09.14 18:28 
  • [編集]

G2gmapで出来ました 

G2gmapのソースを見たところ、単純にq=(入力内容)として投げているだけだったので、見栄えは悪いですけど緯度経度でも使えることが分かりました。
例えば、35.660138,139.729121のように入力すれば大丈夫です(GoogleMapの貼り付け用コードで、緯度経度は確認可能)。
今回はこの方法でブログ記事に入れてみました。
  • schutz 
  • URL 
  • at 2008.09.14 22:38 
  • [編集]

拝見しました。 

なるほど、この方法も追記しておこうかな。
緯度、経度がそのまま出るので、おっしゃるように見栄えがちょっと…ですけれど、いくらでもピンポイントで指定できるのはいいですね。
  • sugar 
  • URL 
  • at 2008.09.14 23:25 
  • [編集]

ありがとうございました 

とてもわかりやすくて助かりました。
  • URL 
  • at 2009.04.29 00:32 
  • [編集]

管理人のみ閲覧できます 

このコメントは管理人のみ閲覧できます
  •  
  •  
  • at 2011.05.09 23:16 
  • [編集]

承認待ちコメント 

このコメントは管理者の承認待ちです
  •  
  •  
  • at 2012.05.25 06:51 
  • [編集]

承認待ちコメント 

このコメントは管理者の承認待ちです
  •  
  •  
  • at 2013.10.17 16:30 
  • [編集]

Comment_form

管理者のみ表示。

Trackback[この記事へのトラックバック]

トラックバックURL
http://fc2blogwalker.blog21.fc2.com/tb.php/110-32ebd0e5

-

管理人の承認後に表示されます
  • from  
  • at 2013.07.03 07:55

Menu

from admin

万が一、記載に誤りのある場合や、追加情報がある場合など、該当記事のコメント欄でお知らせいただけるとありがたく存じます。

sugar

ブロとも申請フォーム

analyzer

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

StyleChanger

public my share

ブログ内検索

Style Changer

この選択ツールについて up!

見本用記事一覧

アルキカタQ&A検索

アルキカタ版Q&Aの内容を検索します。




複数語は半角スペースで区切って検索してください

analyzer

analyzer

Profile

sugar & FC2blog beauties

Author:sugar & FC2blog beauties
「FC2ブログの歩き方」(アルキカタサイト)FC2ブログ出張所です。このブログは、アルキカタサイトの管理人であるsugarと、協力を申し出たサポータ複数で管理しています。

アルキカタサイト管理人:sugar

&FC2blog beauties(アルキカタサポータ)
 Chako
 cyaimi
 KAI

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。