会社のホームページや個人のブログ等に、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マップとストリートビューをブログに埋め込む方法⁉、でした。
でわ、おやすみなさい・・・
