グーグルマップをブログで共有するには?

こんにちは。

ブログを運営していて、例えばおすすめの店を紹介したいんだけど地図を載せたいな〜とか考えたことがありませんか?

やはり文字だけで場所を書いても伝わりにくいので、具体的に地図を載せた方がより良く訪問者に理解してもらえると思います。

私は以前グーグルマップに出ていた地図の必要な部分だけスクリーンショットを撮って掲載していた事があります。

ところが、それは著作権を侵害する行為だと知ったので以下のような方法でマップを載せることにしました。

まあ、YouTubeのコンテンツを共有する方法と似ているので、それほど難易度が高いとは言えないでしょう。

著作権の関係で画像を載せるのは控えさせていただきますが、おそらく以下の説明で理解してもらえると思います。

グーグルマップにアクセス
場所を指定する
検索バー左にある「メニュー」をクリック
「地図を共有または埋め込む」をクリック
「リンクを共有」or「地図を埋め込む」を選ぶ
リンクを共有する時は短縮URLも使用可能です。
※短縮URLの場合
地図を埋め込むときにサイズの変更が可能です。大・中・小・カスタム(任意のサイズ)が選択可。
ブログの記事編集画面にコードを貼り付ける

※カスタムサイズで200×200に設定してあります。

以上のように表示がされます。

グーグルマップを中央寄せにしたいときは?
まとめ

グーグルマップを中央寄せにしたいときは?

CSSに次のコードを追記します。

いちおう私はグーグルマップ以外にもグーグルフォームや埋め込み動画・SNS埋め込みにも活用できるよう、一括して書き込んであります。

/* SNS,iframe中央寄せ */
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet,
.instagram-media {
    margin: 30px auto !important;
}
.iframe { 
	text-align: center;
}

「!important」の記述は、旧エディターを利用している人には必須です。

HTMLでは次のように記述します。

<div class="iframe">
(埋め込みコード)
</div>

このコードをプラグイン「AddQuicktag」に登録しておけば毎回記述しなくてすみます。

以上の設定をして中央寄せにするとこうなります。

まとめ

ブログの記事に地図を埋め込むことは、あまりないかもしれません。

たとえば、おすすめの飲食店を紹介したいとか具体的な場所を伝えたいケースには重宝する機能だと思います。

今回は知っておいて損はない機能ということで紹介しました。