ブログにGoogleマップを表示させる方法

最終更新日

Comments: 0

ときどき次のようにGoogleマップが表示されているサイトがあります(地図で”国会議事堂”を表示しています)。

本ブログでもおススメの店や場所を紹介するとき地図を載せたいと思っていました。Googleマップを表示させたり、YouTube動画を載せたりするとブログなどサイトが充実すると思えたので、表示方法を調べてみました。

***
広告

GoogleマップやYouTubeは”共有”するのがポイント!

Googleマップのソース貼り付け

Googleマップの共有手順 create by tuduri

Googleマップはパソコンやモバイルで広く利用され、ストリートビューなど多くの人が利用しているマップです。

Googleマップの便利なポイント
● 検索したときのヒット率が高い
● デパートや地下街の中の店舗も階層ごとに表示できる
● タップ&スワイプで3D表示が可能
● 地図表示モードを次の3つから選べる
   ・ 交通状況(自動車)
   ・ 路線図
   ・ 自転車
● 道路の混雑状況や地下鉄の路線が分かりやすい(色を使用)

Googleマップの不便なポイント
● フォントサイズの調整ができない
● 施設・店舗の記号が細かい
● 外の明るさなどでは表示が見づらい

Googleマップが不便だと感じるのは主に視認性であり、検索がしやすいことや情報が細かいということで利用している人は多いです。Googleマップでお店の場所をブログに表示することで場所が分かりやすい、場合によってはナビしやすいというメリットがあると思われます。

Googleマップをブログに表示する方法
① 左上の検索バーで表示したい場所を検索する
② ”共有”をクリックする
③ ”地図を埋め込む”をクリックする
④ 表示させる地図のサイズを選ぶ
  (下記に表示された地図のサイズは”小”です)
⑤ ソースをコピーする

コピーしたソースをサイトに貼りつけます。HTMLコードが表示されている画面で貼り付けてください(Livedoorブログの場合は”HTMLタグ編集”の画面です)。

★「国会議事堂」の地図を表示★

本サイトの記事が表示されているこの場所(カラム)の幅は490pxです。中サイズの場合はカラムからはみ出してしまいます。

また待ち合わせ場所や自宅の場所を誰かに教えたいときもGoogleマップの共有機能を便利に使えます。この場合は”地図を埋め込む”ではなく”リンクを共有”を利用します。

国会議事堂の位置を”リンクを共有”すると次のようになります。
https://www.google.co.jp/maps/place/%E5%9B%BD%E4%BC%9A%E8%AD%B0%E4%BA%8B%E5%A0%82/@35.6758923,139.7426693,17z/data=!3m1!4b1!4m5!3m4!1s0x60188b89b2e1b089:0x48c7d4fa5e528690!8m2!3d35.675888!4d139.744858

メールなどに添付すればクリックすることで地図アプリ(プラウザ)が立ち上がり目的の場所が表示されます。

スポンサードリンク

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。