Googleマップとストリートビューをブログに埋め込む方法⁉ | どうなのブログ

Googleマップとストリートビューをブログに埋め込む方法⁉

PC操作

会社のホームページや個人のブログ等に、Googleマップやストリートビューを使って場所の説明をしたいと思ったことはありませんか?

私くるももは、ドライブ先の施設や風景などを紹介するとき、場所を説明する手段としてGoogleマップをよく利用します。場所の説明をするのに地図があるのとないのとでは、格段に説明のしやすさが違います。

そこで今回は、簡単にGoogleマップやストリートビューを自分のブログやHPに埋め込む方法を紹介します。

ちなみに私は、GALLERIA UL7C-R36というゲーミングパソコンを使用していて、Wordpressで[Cocoon]というテーマでブログを書いています。なので途中でWordpress向けの説明も入ります。

Googleマップの埋め込み作業開始

まずはGoogleマップを、作業効率を考え今開いている画面とは別の画面で表示させます。そして左上の漢字の三のような場所をクリックします。

するとサイドバーが現れ、色々な項目が表示されます。そこから[地図を共有または埋め込む]を選択します。

この時点でサイトに表示されるGoogleマップの範囲が決定されるので、拡大縮小して表示したい範囲を選択しておきましょう。

[地図を共有または埋め込む]を選択すると、モニター画面に[共有]が表示されるので[地図を埋め込む]を選択し[HTMLをコピー]をクリックします。

ここまでは、どのブログサービスを利用していても共通作業になりますが、次からの作業はWordpressでの作業になりますので、他のブログサービスを利用している場合は各々の説明に従ってください。

そして今現在作業している画面(ブログ画面)に戻り[ブロックを追加]を選択し、その中からさらに[カスタムHTML]を選択します。

画面中央に[HTMLを入力…]欄が表示されるので、そこに先ほどコピーしたものを張り付けます。

これでGoogleマップの貼り付け作業は完了です。

ちなみに先ほどの[HTMLをコピー]画面では、URLの横に[中]と表示されていましたが、こちらは表示されるGoogleマップの大きさを表すものなので、こちらをクリックして[小]を選択すると表示されるマップは上記のように小さくなります。

ストリートビューの埋め込み作業開始

続いてストリートビューの埋め込み作業に移りますが、作業自体はGoogleマップの埋め込み作業とほぼ同じです。

別画面でGoogleマップを表示させ、続いてストリートビューを表示させます。

そして、Googleマップの埋め込み作業と同様に左上の漢字の三のようなマークを選択します。

すると[画像を共有または埋め込む]という項目が出現するので、こちらを選択します。

そこから、先ほどと同様に[地図を埋め込む]を選択し、[HTMLをコピー]をクリックします。

ここでも現在作業を進めている画面に戻り、[ブロックを追加]を選択し[カスタムHTML]を探します。

そこでもまた[HTMLを入力…]欄が表示されるので、先ほど取得したURLを張り付けます。

これで、ストリートビューの貼り付けは完了です。

まとめ

以上で埋め込み作業は完了しますが、ここで注意をしなければならないことがあります。

簡単にいうとGoogleマップやスクリーンショットはウェブサイトやブログに埋め込むことはできますが、地図そのもののスクリーンショットや画像は載せてはいけないということです。

他人が撮影した画像には著作権が存在するからです。

ストリートビューに関する規則を知りたい方はこちらをご覧ください。

Google マップのルートを共有、送信、印刷する - パソコン - マップ ヘルプ
Google マップで見つけたルートは、他のデバイスや他のユーザーと共有したり、印刷したりできます。 デバイスへのルートの送信に関する問題のトラブルシューティング スマートフォンまたはタブレットをオプションとして表示する 「スマートフォンに...

その他禁止事項もありますので、規則を守ってGoogleマップやストリートビューを利用してください。

以上、Googleマップとストリートビューをブログに埋め込む方法⁉、でした。

でわ、おやすみなさい・・・

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