ブログにGoogleマップを埋め込む方法【はてなブログ】

f:id:amazon_roba:20201013010827j:plain

この記事は "ブログにGoogleマップを貼り付ける方法"についてお話していきます。この記事は約5分ほどで読み終えることができます。

旅の記事に地図を貼り付けたい!!

はてなブログにドイツでの旅記事を書いたロバちゃん。

 

amazon-roba.hatenablog.com

どうやってベートヴェンハウスの地図を示せばいい?

ここはロバちゃんにお任せ。 

今回は、具体的に記事にアップロードしたベートーヴェンハウスの地図の貼り付け方を再現しながら、説明していきます。

 

2. Googleマップを貼り付ける方法!

ステップ.1 Googleマップを開いて、検索したい場所を打ち込む!

 私の場合、ドイツ+ボン+ベートーヴェンハウスを打ち込み、検索結果をクリックしました。

[f:id:画像URL:ブロググーグルマップ]

 

ステップ.2 メニュータブ(左端の三みたいなやつ)を開き、”地図を共有または埋め込む””をクリック。

[f:id:画像URL:ブロググーグルマップ]


地図を共有または埋め込むは、現在地の共有の近くにあります。

 

ステップ.3 ”地図を埋め込む”のタブをクリックし、下部に出てきているURLをコピー。

もし、範囲を変えたい、スケールを変化させたいなら、下部にあるマップを動かしたり、+-で調節しましょう。

[f:id:画像URL:ブロググーグルマップ]

 

 ステップ.4 はてなブログ記事作成で、html編集を選択し、下部に出てきているURLをコピー。

 

<p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10100.35716899128!2d7.09326278787291!3d50.736832728818776!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bee10b0000ec0f%3A0xf0e0317f82ae4690!2z44OZ44O844OI44O844O044Kn44Oz44O744OP44Km44K5!5e0!3m2!1sja!2sjp!4v1603639637059!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>

 

pとpの間にURLをコピーすればよいです!!

 

これで、googleマップを記事に埋め込むことができました。

 

最後まで読んでいただき本当にありがとうございます。 Prrrffff(ロバの鳴き声)

 

【ついでに。。。】

あと、Google console・Bingウェブマスターツールへの登録方法についても書きました!

amazon-roba.hatenablog.com

amazon-roba.hatenablog.com