地理院地図（電子国土Web）で自サイトに地図を埋め込んでみる

地理院地図（電子国土Web）を使ってサイトに地図の埋め込みを行う方法をまとめてみました。

今回は、「東京タワー」の地図を埋め込んでみます。

まずは、
https://maps.gsi.go.jp/
にアクセスしてみて下さい。

以下のような画面が開くので、左上のボックスに「東京タワー」を入力して検索します。

↓

複数の選択肢が出てくるので、「東京タワー」を選択します。

↓

「東京タワー」の地図が表示されます。

それでは、地図を埋め込むためのコードの取得を行います。

画面右上に複数のメニューがあるので、その中の「共有」を選択して下さい。

↓

以下のような小窓が開くので、一番右にあるマークを選択して下さい。

↓

このような感じで埋め込み用のコードが表示されます。

このコードをコピペしてサイトに貼り付けると、このように表示されます。

簡単ですね。

因みに、「詳細設定」をクリックすると、様々な設定を行うこともできます。

例えば、「検索とメニューを表示」にチェックを入れてみると、
以下のように検索ボックスなどが表示されます。

また、埋め込んだ地図の表示サイズを変更したい場合には、コードの中に含まれている「width="500"」や「height="400"」を変更してみください。
例えば、横幅を「width="700"」、高さを「height="450"」に設定するとこのようになります。