地理院地図(電子国土Web)を使ってサイトに地図の埋め込みを行う方法をまとめてみました。
今回は、「東京タワー」の地図を埋め込んでみます。
まずは、
https://maps.gsi.go.jp/
にアクセスしてみて下さい。
以下のような画面が開くので、左上のボックスに「東京タワー」を入力して検索します。
↓
複数の選択肢が出てくるので、「東京タワー」を選択します。
↓
「東京タワー」の地図が表示されます。
それでは、地図を埋め込むためのコードの取得を行います。
画面右上に複数のメニューがあるので、その中の「共有」を選択して下さい。
↓
以下のような小窓が開くので、一番右にあるマークを選択して下さい。
↓
このような感じで埋め込み用のコードが表示されます。
このコードをコピペしてサイトに貼り付けると、このように表示されます。
簡単ですね。
因みに、「詳細設定」をクリックすると、様々な設定を行うこともできます。
例えば、「検索とメニューを表示」にチェックを入れてみると、
以下のように検索ボックスなどが表示されます。
また、埋め込んだ地図の表示サイズを変更したい場合には、コードの中に含まれている「width="500"」や「height="400"」を変更してみください。
例えば、横幅を「width="700"」、高さを「height="450"」に設定するとこのようになります。
この記事へのコメントはありません。