投稿日: 2017/08/25
投稿者:webコラム

こんにちは! ライターのモモタロウです。
今回は、gooブログカスタマイズ google地図をブログ記事に設定する方法をお伝えします。
google地図のコードを入手しよう
googleマップを開き、ブログに表示させたい場所を検索します。
https://www.google.co.jp/maps?hl=ja&tab=wl ←Googleマップ
バージョンによってコードを入手できる操作が変わります。
旧バージョンの場合
1.
googleマップにて、貼り付けたい地図を表示する
2.画面右下にある歯車のようなアイコンをクリック
3.「地図を共有/埋め込む」をクリック
4.「地図を埋め込む」タブをクリックし、表示されたコードをコピー
以前のバージョンの場合
1.以前のバージョンのgoogleマップを表示し、貼り付けたい地図を表示する
2.画面左上にある「リンク」アイコンをクリック
3.表示された画面の上から2つ目「ウェブサイトへの地図埋め込み用 HTML コード」欄に表示されたコードをコピー
最新バージョンの場合を画像で表すと以下の通りです。

左上をクリックしてメニューリストを表示させます。
「地図を共有または埋め込む」をクリックします。
小ウィンドウが開き、「リンクを共有」タブと「地図を埋め込む」タブが上にあるので「地図を埋め込む」タブをクリックします。

表示されているコードをコピーします。四角で囲った部分です。
gooブログにgoogle地図を設定するには?
googleマップのコードを取得したら、gooブログにログインします。
その後、メニューバーにある「モジュール」の「ブログパーツ」をクリックします。
下の画像で四角く囲った部分です。

「ブログパーツ」画面の項目「gooブログパーツに変換」で、「変換元タグ」四角枠部分に先ほどコピーしたコードを貼り付けます。

貼り付け後、「gooブログパーツに変換」ボタンをクリックします。
gooブログパーツに「変換が完了しました」画面に変わります。
下にボタンが3つ並んでいます。「記事に貼る」をクリックします。

新規で記事を編集する画面に遷移します。
そのままプレビューすると・・・

地図がブログ記事に表示されました。
記事に文章を書き込みこんでもよいので、その場合、「HTMLエディタ」タブを「TEXTエディタ」タブに変更して編集するとよいでしょう。

ブログ記事を確認すると・・・
まとめ
いかがでしたか?
ショップの場所などを特定するときに威力を発揮するgoogleマップ。
用途に合ったブログカスタマイズでより充実したブログを作成してみよう。