【初心者向け】Googleマップとストリートビューの掲載方法【2021年版】

スポンサーリンク
ブログ初心者
スポンサーリンク
初心者
初心者

Googleマップやストリートビューをブログやサイトに掲載したいなぁ…

今回はGoogleマップとストリートビューの掲載方法を

簡単にまとめてみました!

スポンサーリンク

Googleマップを埋め込む方法

今回は例として「東京駅」の場所を

埋め込んでみましょう。

  1. Googleの検索画面ブラウザで開き、「東京駅」と入力し検索します。
  2. 検索上部にあるタブの「地図」をクリックし、Googleマップに切り替えます。
  3. 画面左側にサイドバーが表示されます。
  4. 中段の一番右側に「共有」というアイコンがあり、クリックします。
  5. 「リンクを送信する」と「地図を埋め込む」という2つのタブが表示されます。「地図を埋め込む」をクリックします。
  6. 上部に埋め込み用のコードが表示されます。
  7. コードの左側より大きさが変更できますので、サイズを選び、HTMLをコピークリックします。(カスタムを選択すると好きなサイズで埋め込めます)
  8. ブログやサイトへHTMLを貼り付けます。

これでブログやサイトの中に

Googleマップを埋め込むことが出来ました!

サイズ見本↓

カスタム(300×300)

ルートを表示したままGoogleマップを埋め込む方法

次に、Googleマップ上にルートを

表示したまま埋め込んでみましょう。

今回は、例として「東京駅」から

「有楽町駅」までのルートを表示します。

  1. Googleの検索画面ブラウザで開き、「東京駅から有楽町駅」と検索します。
  2. タブでおすすめの交通機関、自動車、公共交通機関、徒歩、自転車、飛行機と移動方法を選びます。
  3. 左上に「ー」が縦に3つ並んでいるアイコン(メニュー)クリックします。
  4. 中段あたりにある「地図を共有または埋め込む」をクリックします。
  5. 「リンクを送信する」と「地図を埋め込む」の2つのタブが表示されます。
  6. 地図を埋め込む」をクリックします。
  7. コードの左側でサイズを選び、HTMLをコピークリックすると、コピーできます。(カスタムを選択すると好きなサイズで埋め込めます)
  8. ブログやウェブにHTMLを貼り付けます。

今回は徒歩で表示しています。

これでブログやサイトの中に、

ルートを表示させたままGoogleマップを

埋め込む事が出来ました!

サイズは、Googleマップの埋め込みと同じです。

ストリートビューを埋め込む方法

最後にストリートビューを埋め込んでみましょう。

  1. Googleの検索画面ブラウザで開き、「東京駅」と入力し検索します。
  2. 検索上部にあるタブの「地図」をクリックし、Googleマップに切り替えます。
  3. ストリートビューを表示します。
  4. ストリートビューの画面で、相手に見せたい場所で止まります。
  5. 左上に・が縦に3つ並んでいるアイコンがあり、そこをクリックします。
  6. 画像を共有または埋め込む」をクリックします。
  7. 「リンクを送信する」と「地図を埋め込む」の2つのタブが表示されます。
  8. 地図を埋め込む」をクリックします。
  9. コードの左側でサイズを選び、HTMLをコピークリックすると、コピーできます。(カスタムを選択すると好きなサイズで埋め込めます)
  10. ブログやウェブにHTMLを貼り付けます。

これでブログやサイトの中に

ストリートビューを埋め込む事が出来ました!

サイズ見本↓

カスタム(300×300)

屋内も撮影されていれば、屋内の様子も埋め込む事が出来ます。

最後に

ブログやサイトで情報を発信する際、文字だけでは伝わりにくい場合もありますよね。

今回ご紹介した方法を利用すれば、Googleマップ上で場所を示したり、画像を使ってその場所をイメージしやすくなります。

Googleマップやストリートビューを埋め込む方法に悩んでいる方や困っている方は、こちらの記事を参考に一度試してみて下さいね。

良ければ、シェアもお願いします♪

こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」

コメント

タイトルとURLをコピーしました