【酒ゲーム★鈴木酒店】

<静岡市駿河区にある小さな酒屋の、お酒関連の話とオタク系趣味な話とかのブログ>

★当店で販売中の、萌酒もえしょく【商品一覧】
・鈴木酒店デザインのユニクロ商品【組み合わせ多数】です
・貴方も当店の座敷部屋で【日本酒講座】を開催しませんか
2009年10月23日 00:47
この記事のことをtwitterでつぶやく♪
マップをブログに貼ってみる。
てなわけで、自分のブログにあの高性能な「Googleマップ」を貼ってみよう!という記事。

ちょうど私、つい先程いろいろとカスタマイズしてみてて、このサイドメニューのプロフィール部分にあるような感じに設置してみたところ。
自分自身の覚え書きということもあるんだけど、「やり方がよく分からない」「私も設置したい!」という方の参考になればと~face02

マップをブログに貼ってみる。
まずはGoogleマップにアクセス! URLはこちらです。
http://maps.google.co.jp/maps?hl=ja&utm_source=ja-hp
開いたら、画面上部にあるのテキストボックス(赤矢印)の部分に、「ブログに掲載したい場所」を入力して地図検索する。住所を入力するのが一番手っ取り早いかも。

マップをブログに貼ってみる。
しばらくすると、地図検索した地点を中心とした地図が出てきます。

そしたら、地図の右上にある「リンク」というところをクリックします。するとそのすぐ下部に2段になったHTMLソースが出現します。その下段の方の「HTMLを貼り付けてサイトに地図を埋め込みます」と書いてるボックス内のHTMLを使うことになるので、これを右クリックしたりして「コピー」しましょう。

そのHTMLの下に「カスタマイズ~」っていうリンクもありますが、もうちょっと細かくカスタマイズしたいのでここではあえて行いません。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E9%9D%99%E5%B2%A1%E5%B8%82%E9%A7%BF%E6%B2%B3%E5%8C%BA%E8%B1%8A%E5%8E%9F%E7%94%BA9-20&sll=36.5626,136.362305&sspn=57.64762,59.326172&ie=UTF8&hq=&hnear=%E9%9D%99%E5%B2%A1%E7%9C%8C%E9%9D%99%E5%B2%A1%E5%B8%82%E9%A7%BF%E6%B2%B3%E5%8C%BA%E8%B1%8A%E5%8E%9F%E7%94%BA%EF%BC%99%E2%88%92%EF%BC%92%EF%BC%90&ll=34.976748,138.402316&spn=0.234896,0.231743&z=12&output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&q=%E9%9D%99%E5%B2%A1%E5%B8%82%E9%A7%BF%E6%B2%B3%E5%8C%BA%E8%B1%8A%E5%8E%9F%E7%94%BA9-20&sll=36.5626,136.362305&sspn=57.64762,59.326172&ie=UTF8&hq=&hnear=%E9%9D%99%E5%B2%A1%E7%9C%8C%E9%9D%99%E5%B2%A1%E5%B8%82%E9%A7%BF%E6%B2%B3%E5%8C%BA%E8%B1%8A%E5%8E%9F%E7%94%BA%EF%BC%99%E2%88%92%EF%BC%92%EF%BC%90&ll=34.976748,138.402316&spn=0.234896,0.231743&z=12" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>


たぶん、↑こんな感じのHTMLがコピーされたはず。

じゃあそれをどこにペースト(貼り付け)するかと言うと、基本的には「ブログのプロフィール内」になります。「カスタムプラグイン」で他の箇所に表示させることもできますが、その場合はさらにHTMLやCSSの知識が必要になってきちゃいます。
マップをブログに貼ってみる。
プロフィールに地図を貼るやり方…分かります?

…そう、管理画面のメニューにある「ブログ環境設定」をクリックし、次にその一番下部に「プロフィール自己紹介」というテキストボックスがあるのでここに貼り付けます。プロフィール紹介文章の前後とか、うまくバランスをとって下さいねface01

ただその際、このままでブログを表示すると、きっと地図がえらく大きくなってしまってるか、もしくは途中で切れてしまっているかと思います。なので「地図の大きさ」をカスタマイズする必要がでてきます。

大丈夫です♪ そんなに難しいことじゃあありませんicon06 「間違い探し」みたいな気持ちで該当箇所を探して数字を変えてあげればいい感じなんですよface02

HTMLを貼り付けた「プロフィール自己紹介」欄をもう一度見て下さい。
貼り付けたHTMLってなにやらとても長いものなんですが、その冒頭部分に「width="○○○" height="○○○"」って書いてる部分ありますよね(○○○は数字)。この中の数字が今の地図のサイズになります。widthが横幅、heightが縦幅になります。

マップをブログに貼ってみる。
上の画像のケース1は「width="200" height="300"」に変更して表示してみたものです。

そしてケース2ですが、ケース1と比べて地図の大きさだけじゃなくって、なにやら違うの…分かります?

…そう、これはまず、地図に外枠の線が付いてます。これは、同じくHTMLの冒頭部分に「frameborder="0"」という境界線の太さを指定する部分がありまして、これを「frameborder="1"」にしたからです。

あとこの地図、ケース1と比べると「地図の倍率」が変わっていますよね?
これを変更するには、真ん中あたりの「</iframe>」の少し手前に「z=○○」という箇所、分かりますか? ここの数字を変えてみるだけです。数字を大きくするほど拡大していきます。

ケース1では「z=16」のに対してケース2では「z=12」にしてみました。また地図のサイズは「180×250」です。

あともう1箇所違うとこあります。…地図の下にある「大きな地図で見る」というリンク文字も取っ払ってしまいました。
もしこれをする場合は、真ん中あたりの「<br />」を含めたそこから下の文字を全て消してしまいます。「</iframe>」は残しておいて下さいね。

マップをブログに貼ってみる。
次にケース3ですが、これは地図サイズや倍率(これはz=10)もまた違ってますが、実はケース1や2であった「吹き出し(インフォウィンドウ)」を消してみたものです。地図の大きさ等によってはその吹き出しや影が邪魔になってしまうので、いっそのこと消してしまいました。

消し方ですが、Googleマップを呼び出すリンクURLの最後に「&iwloc=」の文字を追加します。
つまり、今がもし「=embed"></iframe>」となっているなら、これが「=embed&iwloc="></iframe>」というようになります。…いかがでしょうか?

そして最後がケース4ですが、これ、検索地点であるポイント(A)を中心点から少しズラしてあるんですicon10
これ、地図の「+ボタン」で拡大していったら、もちろん全然関係ないところに拡大してってしまうのですが、地図を見やすくするには良いかなと思って、それでこんなふうにしてみました(笑)。

この修正方法は、URLの終わりあたりに「amp;ll=○○.○○,□□.□□」となってる箇所、分かりますか? ここに地図中心点の緯度経度情報が入ってます。

「そんな細かい緯度経度なんてどうやって調べるの?!」と言うと、それはやはりGoogleマップを使います。中心点にしたい箇所が決まったらその地点の上で右クリックをし、出てきたメニューの一番下「この場所について」を選択します。そうすると、画面上部の検索文字入力ボックスにその地点の緯度経度情報が表示されます。なのでこれを使い、先程の情報をすり替える形になります。


以上ですね。長々とすみません。
でも、このGoogleマップはとっても高性能なものなので、うまく使っていって、ブログを読んでくれた人にとって分かりやすいものになったらいいなと思いますface02


同じカテゴリー(ブログやSNS等)の記事画像
インスタグラム、フォローお願いします(^o^)/
新着記事の掲載(投稿)をメールでお知らせ!
ブログが重かったのはAddClipsが原因でした
IngressのMeetupに行ってきた!
新着記事の掲載をメールでお知らせ
同じカテゴリー(ブログやSNS等)の記事
 インスタグラム、フォローお願いします(^o^)/ (2021-10-01 20:48)
 新着記事の掲載(投稿)をメールでお知らせ! (2016-01-04 16:45)
 ブログが重かったのはAddClipsが原因でした (2015-07-14 13:14)
メールアドレスを登録いただくと、このブログに最新記事が掲載された事をお知らせするメールが届くようになります(♭^-')♪ 詳しくはこちら
この記事をtwitterでつぶやく: この記事のことをtwitterでつぶやく♪ (twitterとは?)
記事投稿者: 鈴木酒店 2009年10月23日 00:47
▼この記事に対して書かれたコメントです
あなたは本当にそれがあなたのプレゼンテーションと非常に簡単に見えるようですが、私はこのトピックでは、私は私が決して理解するだろうと感じていること、実際には一つのことであることがわかりました。それはあまりにも複雑で、私にとっては非常に広いと思われる。私が提出するあなたの次に楽しみにして取っている、私はそれを手にしようよ!ご多幸を祈る
Posted by escort service in dubai at 2012年11月13日 14:50
おい!この記事は、任意のより良い書き込むことができませんでした!この記事を通して読むと、私の古き良き時代のルームメイトを思い出させる!彼は常にこのことについておしゃべりを続けた。私は彼にライトアップこれを転送します。かなり特定の彼は良いリードを持ちます。共有のための多くの感謝!よろしく
Posted by dubai escort agency at 2012年11月13日 15:16

▼お気軽にコメントを入力してって下さい(・∀・)
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
 
先頭へ
削除
マップをブログに貼ってみる。
    コメント(2)