ブログにグーグルマップの地図を表示させる簡単な方法。

ブログで美味しかったお店や面白かった施設を紹介するとき、文章や写真だけでなく地図を表示したいときってありますよね?。↓イメージとしてはこんな感じ

googlemap

自分で書いた地図を表示してもいいですが、グーグルマップを利用できれば綺麗で正確で良いですよね。さらに何より自分で描くよりも簡単

ということで使いどころの多いグーグルマップをブログに表示する方法をご紹介します。


スポンサーリンク

早速やってみよう。3分くらいでできます。

ということで早速やってみたいと思います。

今回は練習に”静岡駅“の地図をブログに表示してみたいと思います。

1.グーグルマップを表示する

グーグルマップ(https://www.google.co.jp/maps/)にアクセスして左上に表示される検索バーに表示したい場所を表示させます。

googlemap1

2.検索バー左のメニューを表示

表示させたい場所が検索されて地図上でカーソルが設定されるので、次に検索バー横の三本線のアイコンをクリックしてメニューを表示します。

googlemap2

3.地図を共有または埋め込む

メニューの中に”地図を共有または埋め込む“という項目がありますのでクリックします。

googlemap3

4.地図を埋め込むボタンでソースを表示

地図を共有または埋め込む“ボタンをクリック後、”リンクを共有”と”地図を埋め込む”タブのあるポップアップが表示されます。初期表示では”リンクを共有”になっていますので、”地図を埋め込む“タブをクリックして切り替えます。

googlemap4

そうすると、先ほど検索した場所(今回は静岡駅)周辺の地図が表示されるとともに、その上に1.地図のサイズ2.ソースコードが表示されます。

まず表示させたい地図のサイズを選択(小、中、大、カスタムサイズ)します。ブログで使うのであれば小or中で良いと思いますが目的に合わせて選択すればOK。サイズ選択後にソースコードをコピーしてブログに貼り付けます。

※地図のサイズによってソースコードが変わるので地図のサイズ変更後にソースコードをコピーしてください。

実際に地図として表示させてみた結果がこちらになります。地図のサイズはです。

おすすめなお店や施設を調べたときに地図までしっかり表示されていると便利だなー、と思います。ぜひ、試してみてください^^

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク