ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト（箇条書き）で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素
【HTML】地図を埋め込む方法
【HTML】
地図を埋め込む方法
地図を埋め込む方法
Web上に地図や地図へのリンクを埋め込むことができます。
「Google」や「yahoo」などが、ありがたいことに、 Web上に簡単に地図を埋め込めるようにしてくれています。
無料で使えるのに、地図情報は本当に便利です。
困ったときに調べると、周辺の情報まで出てきてくれます。
「Google Map」をWebに組み込む方法
「Google Map」をWeb上に組み込むのは、凄く簡単。
「Google Map」で目的地を検索して、埋め込みコードを取得して、 自分のWebページに埋め込むだけ。
「Google Map」をWebに埋め込む流れ
ブラウザで「Google Map」を開く
↓
目的地を検索する
↓
「共有」ボタンを選択
↓
「地図を埋め込む」を選択
↓
サイズを選択して、埋め込みコードを選択&コピーする
↓
地図を埋め込むWebページに、埋め込みコードを張り付ける。
↓
Webページを確認して、地図が表示されれば完了
「Google Map」の地図埋め込みコード
埋め込みコード
<iframe src="https://www.google.com/maps/embed?pb=目的地の「UTF-8エンコード」" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>東京駅の「Google Map」
Back
「Google Map」で指定した場所を表示させる方法
自分のWebページに目的の場所を示す「Google Map」へのリンクを組み込むことができる。
「Google Map」で、好きな場所を表示させたい時には、 「パラメータ」を使って指定することで、希望の場所を表示することができる。
目的地の地名を「UTF-8エンコード」に変換して、パラメータに組み込むことで、 目的地を中心とした「Google Map」を表示することができる。
Google MapのURL
Google Mapで指定の場所の地図を表示する場合。下記のURLを利用する。
記述方法
記述例
吹き出し表示
https://maps.google.com/maps?パラメータ
記述方法
<a href="https://maps.google.com/maps?パラメータ" target="_blank">GoogleMapへLink</a>
記述例
東京駅のUTF-8エンコード＝「%e6%9d%b1%e4%ba%ac%e9%a7%85」
https://maps.google.co.jp/maps?q=%e6%9d%b1%e4%ba%ac%e9%a7%85&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a&um=1&ie=UTF-8
https://maps.google.co.jp/maps?q=%e6%9d%b1%e4%ba%ac%e9%a7%85&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a&um=1&ie=UTF-8
吹き出し表示
URL上のパラメータで、吹き出しを表示させる方法。
「&iwloc=A」パラメータを入力することで、表示時に吹き出しが表示される。
「ll」パラメータ＝経度・緯度の指定 「q」パラメータ＝
https://maps.google.co.jp/maps?ll=35.681701,139.764535&q=%e6%9d%b1%e4%ba%ac%e9%a7%85&iwloc=A
あまり、検索されないような場所の場合は、下記のように、「q」パラメータに、経度・緯度＋(表示語句)で渡すと表示される。
吹き出しには、タイトルに「表示語句」、詳細に、「経度・緯度」が表示される。
https://maps.google.co.jp/maps?q=35.681701,139.764535+(%e6%9d%b1%e4%ba%ac%e9%a7%85)&iwloc=A
「&iwloc=A」パラメータを入力することで、表示時に吹き出しが表示される。
「ll」パラメータ＝経度・緯度の指定 「q」パラメータ＝
https://maps.google.co.jp/maps?ll=35.681701,139.764535&q=%e6%9d%b1%e4%ba%ac%e9%a7%85&iwloc=A
あまり、検索されないような場所の場合は、下記のように、「q」パラメータに、経度・緯度＋(表示語句)で渡すと表示される。
吹き出しには、タイトルに「表示語句」、詳細に、「経度・緯度」が表示される。
https://maps.google.co.jp/maps?q=35.681701,139.764535+(%e6%9d%b1%e4%ba%ac%e9%a7%85)&iwloc=A
Google Mapへのパラメータ
| パラメータ | 意味 | 説明 |
|---|---|---|
| f | 左側にあるメニューの表示設定 |
q:通常（デフォルト） d:乗換案内。現在地・目的地の入力ダイアログを表示。 |
| hl | 地図表示の言語設定 |
ja:日本。 en:英語 デフォルト＝ユーザーの環境 |
| q | マーカー・吹き出しの設定。 |
地名か、緯度経度（カンマ区切り）で指定。 日本語は、URLエンコードでの入力。 |
| ie | 入力文字コード |
UTF8（デフォルト） 「Shift-JIS、EUC-JP」などが利用可能。 |
| oe | 出力文字コード |
UTF8（デフォルト） 「Shift-JIS、EUC-JP」などが利用可能。 |
| ll | 地図の中心の緯度経度 |
世界測地系、十進、カンマ区切り。 記入例 35.68923,139.693995 |
| spn | 表示範囲をDegree単位で指定 |
zパラメータが無いときに有効。 カンマ区切り 記入例 0.029488,0.083942 |
| z | ズーム |
0～20くらい（20以上が見れる地域もあるし、18以降は見れない地域もある。） 0が縮小、20が拡大 |
| t | 地図のタイプ選択 |
m:マップ（デフォルト） k:サテライト h:デュアル p:地形 |
| om | 地図右下に表示されるオーバービュー |
0:なし（デフォルト） 1:あり |
| layer | ビュー設定 |
t:トラフィックビュー（デフォルト） c:ストリートビュー |
| cbll | ストリートビューでのポイントの緯度経度 |
世界測地系、十進、カンマ区切り。 記入例 35.689186,139.693836 |
| cbp | ストリートビューでの各種表示設定 |
カンマ区切りで、 1つめ: 1:小さい画面 2:全画面 2つめ: ローテーションアングルをDegreeで 3つめ: チルトアングル。-90（真上）～90（真下）←？意味不明 4つめ: ズーム。0～2 5つめ: ピッチ。-90（真上）～90（真下） 記入例 2,123.38858745822836,,0,-24.070358768546704 |
| client | ブラウザの種類 |
詳細は不明だが、 FireFox＝「firefox-a」 という表示になっていた。 |
| um | 不明 | |
| sa | 不明 | |
| tab | 不明 |
Back
