グーグルマップをアメブロ記事に埋め込む方法 | 自分で作れるホームページ作成法

自分で作れるホームページ作成法

本業が忙しい人でもビジネス用のホームページを自作する方法をやさしくお伝えします。


大きな地図で見る

こんにちわ、ホームページ作成アドバイザーの田中です。

アメブロの記事に地図を埋め込みたいと思いました。

が、しかし、そのままでは埋め込む事ができませんでした。


そこで、以下のようにしましたら張り付けできましたので記録しておきますね。

ポイントとなるのは2点です。
1、古いグーグルマップに戻し古いタグを取得する事
2、アメブロのエディタは「タグ編集エディタ」を使う事


■具体的な手順
1、グーグルマップにアクセスします。
http://www.google.co.jp/maps

こんな感じのマップが表示されると思いますが、それは新しいグーグルマップです。


グーグルマップは2014年2月に新しいグーグルマップになりました。
新しいグーグルマップのタグを張り付けても、アメブロではエラーになるので古いグーグルマップに戻します。

2、旧グーグルマップに戻す
マップの下の?をおして以前のマップに戻るを押します。


3、タグを取得します。

(1)住所などで検索します。
(2、リンクボタンを押します。
(3)「ウェブサイトへの地図埋め込み用 HTML コード」をコピーします。
表示されたタグはの横幅と縦幅は下記のようになっているところをあなたのアメブロ記事の横幅に合わせて変更してください。
このブログの場合は400です。
width="425" height="350"

width="400" height="300"

4、アメブロの基本設定から「タグ編集エディタ」に変更する

(1)「ブログ管理>各種設定>基本設定」を押す
(2)タグ編集エディタを選択して一番したの保存ボタンを押します。

5、新しい記事を作り、コピーしたタグを張り付けプレビューをします。

(1)タグを張り付け
(2)プレビューボタンを押す
(3)地図が表示されたらOK


今回の記事は下記を参考にさせていただき2014年6月現在の方法についてまとめさせていただきました。
グーグルマップをアメブロの記事に貼りつける方法
アメブロにGoogle Mapを貼り付ける方法のその後



本日もお読みいただきましてありがとうございました。
ホームページ作成アドバイザーの田中がお伝えしました。


今回の記事を気に入っていただけた方はこちらへ!