自分のブログやサイトに地図や案内図などを表示させる方法

今回はグーグルマップやブログパーツを使って、簡単に自分のブログやHPに地図を表示させる方法についてお伝えしようと思います。

 

例えスマホの地図機能(GPS機能)があるにせよ、サイトに自分の所在地を表示させておくことで信頼度もあがりますし、アフィリエイターやネットショップの方もセミナー開催場所を告知したり、

 

リアル店舗の場所を紹介したりなど、地図も一つのコンテンツとして使えますので!

 

ではではなるべく簡単な順に紹介しますね!

 

 

HP,ブログ,地図,案内図,表示,方法,挿入

ブログパーツを使えば地図や路線図などの案内図を表示させるのは簡単

まず、自分のブログに地図を表示させる際に一番簡単なのはブログパーツを使う事でしょう。

 

例えば地図表示ブログパーツを利用するとサイドバーのフリースペースに簡単に地図が表示可能。

 

HP,ブログ,地図,案内図,表示,方法,挿入

【 ギョギングマップ,住みよい街マップ,ルートマップなど使えそうじゃありませんか? 】

 

下にちょっと制作者の宣伝が出ますが、地図を見たい人はそんなこと気にしませんよね?お店までの路線図なんかは表示してくれるとありがたいです♪

 

私もペットショップを最近は周るのですが(ペットは世話の手間がかかるので沢山店舗に置けないため)、実際にあとひと工夫でサイトから離れないのに・・・。と思うことは多々あります。

 

個人ブログに簡単な所在地しかなくて、またマップを調べるのに二度手間ですから。折角ブログやHPに来たのに、地図を調べているうちに別の店(ライバルサイト)に興味を持たれてしまったのではもったいなくないですか?

 

新機能になったグーグルマップで地図をブロに挿入しましょう!

次に自分で地域や場所を限定した地図をホームページに挿入する方法について説明したいと思います♪グーグルマップが2014年にアップデートして今までと埋め込みの仕方が若干変わったので注意が必要です

 

① グーグルアカウントを取る(とらなくても可能)

 

・・・gmailやyoutubeアカウントを取る際にすでに登録している方が多いと思います。

 

② 次にグーグルマップに行き表示させたい場所を選択

 

HP,ブログ,地図,案内図,表示,方法,挿入

  【 今回はスカイツリー周辺の案内図をホームページに埋め込みます! 】

 

すると?

 

HP,ブログ,地図,案内図,表示,方法,挿入

地図上に目的地がアイコンで示されます。

 

 

② 出発先と目的地を検索窓に打ち込む

HP,ブログ,地図,案内図,表示,方法,挿入

続いて出発先を入力すると、そこまでの道順が表示されます

 

③ 交通手段はアイコンで変更が可能。車・徒歩・電車・自転車です。

 

HP,ブログ,地図,案内図,表示,方法,挿入

 

HP,ブログ,地図,案内図,表示,方法,挿入

【 徒歩も表示できましたか? 】

 

 

④次に右下の歯車マークをチェックしましょう

 

HP,ブログ,地図,案内図,表示,方法,挿入

 

⑤この動画を共有を選択

HP,ブログ,地図,案内図,表示,方法,挿入

 

⑥自分でサイズを選択して!

HP,ブログ,地図,案内図,表示,方法,挿入

 

後はコードを張り付ければOK!これでブログやホームページに自分の好きな道順を示したマップを表示できます。他にもお勧めのお店情報なんかもコメント付きで楽々表示。

 

※ 現在は貼りつけ画面がコチラになっています。

 

 

HP,ブログ,地図,案内図,表示,方法,挿入

 

 

 

全国店舗一覧情報をブログに表示させる方法

続いて全国店舗一覧などの地図をブログに表示させる方法です。

 

既にみなさん無料でHMTLとCSSのコードを配布下さっているので紹介します。

 

  • 不動産関係の全国マップ
  • 駐車場まとめブログ
  • 地域の食べ歩きブログ
  • 子育て+お出かけスポット

 

こういうブログを作る時に、グーグルマップ以外の地域検索地図があると便利です。

 

 

HTML+CSS+JAVA

 

当サイトのブログサイズにあっているのでコードを採用させていただきました。
クリックすると全国地図情報や店舗一覧が表示される仕組みです。

 

( 当サイトではあまり全国マップを入れる必要がないのでクリックは外してあります )

 

 

HP,ブログ,地図,案内図,表示,方法,挿入
北海道・東北
関東
中部
近畿
中国・四国
九州・沖縄

 

北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県

 

茨城県
栃木県
群馬県
埼玉県
千葉県
東京都
神奈川県

 

新潟県‎
富山県‎
石川県‎
福井県‎
山梨県‎
長野県‎
岐阜県
静岡県
愛知県‎

 

三重県
滋賀県
京都府
大阪府
兵庫県
奈良県
和歌山県

 

鳥取県
島根県
岡山県
広島県
山口県
徳島県
香川県
愛媛県
高知県

 

福岡県
佐賀県
長崎県
熊本県
大分県
宮崎県
鹿児島県
沖縄県

 

 

【 最強の都道府県選択のUIを考えてみた【HTML+CSS+jQuery

 

 

HTMLとCSSのみで地図表示

 

こちはらHMTLとCSSのみですので無料ブログでもテーマをカスタマイズできるものならほぼ使えると思います。商用可能も可能で画像サイズに合わせて表示が切り替わるとても素敵なデザインです。

 

 

ブログにグーグル地図や全国マップを埋め込んで表示させる方法

 

【 HTML/CSS のみで作った、レスポンシブ+クリック対応の日本地図(フリー素材):発笑検索隊 】



HP,ブログ,地図,案内図,表示,方法,挿入
アフィリエイト無料の基礎講座はコチラ

TOPへ