地理院地図(電子国土Web)

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

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

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

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

以下のような画面が開くので、左上のボックスに「東京タワー」を入力して検索します。
地理院地図(電子国土Web)のトップページ

複数の選択肢が出てくるので、「東京タワー」を選択します。
地理院地図(電子国土Web)で検索

「東京タワー」の地図が表示されます。
地理院地図(電子国土Web)の表示

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

画面右上に複数のメニューがあるので、その中の「共有」を選択して下さい。
地理院地図(電子国土Web)の「共有」を選択

以下のような小窓が開くので、一番右にあるマークを選択して下さい。
地理院地図(電子国土Web)の「共有」を選択

このような感じで埋め込み用のコードが表示されます。
地理院地図(電子国土Web)の埋め込みコード

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

簡単ですね。

因みに、「詳細設定」をクリックすると、様々な設定を行うこともできます。
地理院地図(電子国土Web)の埋め込みコードの詳細設定

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

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

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. ITコンサルティング
  2. トラブル
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. SNSシェア
  7. 開始
  8. コーディング
  9. WP:WordPress(ワードプレス)
  10. WP:WordPress(ワードプレス)

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

  • 以前「田舎って食費掛からんやろ」って言われて、ちょっとイラっとした。 田舎モンも肉食べるし、魚食べるし、野菜も買うよ。 意識して節約しないと、田舎かってそれなりには食費掛かるよ。
    about 3日 ago via Twitter Web App

アーカイブ

PAGE TOP