色々なサイトを見ると、以下のように「Google マップ」が埋め込まれていたりします。
試しに、ウチの住む宗像市の「宗像大社」を埋め込んでみました。
では、どうやって埋め込むのか？？ というのを今回はご紹介。
（各画像はクリックすることで大きな画像が表示されます。）
▼ 「Google マップ」に表示のある場所
今回、使用したパソコンは「Mac OS」、ブラウザは「Safari」ですが、「Windows」の「Internet Exploler」等でも同じ方法です。
まずは、観光地や名所、大きなお店等、「Google マップ」に名称の表示のある場所。
なにはともあれ、「Google マップ」のサイトを表示させます。
→ https://www.google.co.jp/maps/（Google マップ）
埋め込みたい場所を検索します。今回は「宗像大社」で検索します。
左上の検索から検索を行うと、地図上の「宗像大社」の部分に「赤いピン」が立ち、左側に詳細が表示されます。
検索をしなくても、名称の記載のある場所の場合は、その名称をクリックすることで「赤いピン」が立ち、詳細が表示されます。
この時点で以下のどちらかの操作を行います。
・左上の３本線のマークをクリックしてメニューを表示させる
・共有をクリックする
メニューを表示させた場合はメニュー内の「地図を共有または埋め込む」を選択します。
どちらの操作を行っても、以下の画像のようになります。
「地図を埋め込む」を選択して表示される構文を自分のサイトに貼付すれば表示されます。
HTMLのインラインフレーム：<iframe>の構文が表示されます。
埋め込むサイズは自由に選択できます。
また、「リンクを共有」の方には、表示している「Google マップ」の「Webアドレス」が表示されますので、メール等で場所を連絡する場合は、こちらを利用した方が便利です。
「Google マップ」上に名称のある場合は簡単ですが、問題は、自分の自宅や、マイナーな観光スポット等、名称の無い場所です。
▼ 「Google マップ」の任意の場所を自分のサイトに埋め込む
今回は「宗像大社」のすぐ下にある場所を設定してみます。（以下の画像の赤い丸の部分辺り）
埋め込みたい場所を「左クリック」します。
すると、「灰色のピン」が表示され、下に場所の情報が表示されます。
ここで、下に表示された情報の「数字の部分」をクリックします。
この数字が「灰色のピン」の場所の位置情報です。
位置情報が左上の検索の部分に表示され、「灰色」だったピンが「赤」に変わります。
「赤いピン」に変わればあとは「名称の表示のある場所」と同じ操作を行うだけです。
メニューを表示させ「地図を共有または埋め込む」を選択する、もしくは「共有」から地図を埋め込むことができます。
難しそうに見えて、結構簡単に埋め込むことができます。
