IT Design 旅 PetLife Life RenojiStock AboutUs
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ページに「画像」の埋め込む方法Webページに「動画」を埋め込む方法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】「ルビ」をふるための要素





IT Memo >>> HTML >>> 【HTML】「Google Map」へ「リンク」を作る方法

【HTML】「Google Map」へ「リンク」を作る方法

【HTML】
「Google Map」へ「リンク」を作る方法




「Google Map」へ
「リンク」を作る方法は、
かなり簡単。


「Google Map」が指定する形式の
「URLパス」へと「HTMLタグ」の「a」タグを使用して、
通常と同じように、
「リンク」を作成する。

いつもと異なるのは、
「リンク先URLパス」だけ。
「Google Map」が指定して、
公開してくれている「URLパス」を記述する。



Google Map」が公開してくれている「URLパス」
指定場所https://www.google.com/maps/search/?api=1&query=キーワード+キーワード+.......
ルートhttps://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=driving
ストリートビューhttps://www.google.com/maps/@?api=1&map_action=pano&viewpoint=緯度%2C経度&heading=-45&pitch=38&fov=80



詳しくは、
下記をご参照ください。



「Google Map」への「リンク」を作成する「HTMLタグ」


「Google Map」への
「リンク」を作成する「HTMLタグ」は、
凄く簡単でシンプル。


「Google Map」が指定する「URL形式」を
リンク先の「URLパス」として「指定」するだけ。

「Google Map」が指定する「URL形式」は、
下記の項目で、
確認してください。
「指定場所」「ルート」「ストリートビュー」など、
表示される「地図タイプ」によって、
「リンク先URL」が少し異なります。



Google Map」が公開してくれている「URLパス」
指定場所https://www.google.com/maps/search/?api=1&query=キーワード+キーワード+.......
ルートhttps://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=driving
ストリートビューhttps://www.google.com/maps/@?api=1&map_action=pano&viewpoint=緯度%2C経度&heading=-45&pitch=38&fov=80



「リンク」を作成する「HTMLタグ」書式

<a href="「Google Map」へのURLパス">表示されるテキスト</a>
<a href="「Google Map」へのURLパス" target="_blank">表示されるテキスト</a>
<a href="「Google Map」へのURLパス" target="_parent">表示されるテキスト</a>
<a href="「Google Map」へのURLパス" target="_self">表示されるテキスト</a>
<a href="「Google Map」へのURLパス" target="_top">表示されるテキスト</a>
<a href="「Google Map」へのURLパス" target="new">表示されるテキスト</a>

<a href="https://www.google.com/maps/search/?api=1&query=名称" target="_blank">表示されるテキスト</a>



「a」タグの「target」オプションの「値」
キーワード説明
_self デフォルトの設定。
設定がない場合は、「_self」が採用される。
現在の閲覧コンテキストで表示される。
_blank 新しいタブにリンク先を表示する。
ブラウザの設定によっては、新しいウィンドウに表示される。
_parent 現在の親の閲覧コンテキストに表示。
親がない場合は、「_self」と同じ動作。
_top 最上位の閲覧コンテキストに表示する。
親の閲覧コンテキストがない場合は、 「_self」と同じ動作。
_new 新しい「タブ」「ウィンドウ」にリンクを開いて表示する。
_window 新しい「ウィンドウ」にリンクを開いて表示する。
_tab 新しい「タブ」にリンクを開いて表示する。


Back

「特定の場所」を表示する「GoogleMap」への「リンク」を作成する方法


「特定の場所」を表示する
「GoogleMap」への「リンク」を作成するには、
指定された「書式」で記述した「URLパス」への「リンク」を作成するだけ。

「指定場所」を表示する「GoogleMap」へのリンクは、
https://www.google.com/maps/search/
を利用する。
「URLパス」に記述する内容によって、
同じ場所でも、
表示される「地図内容」が異なってくる。

「名称」「住所」「カテゴリー」「キーワード」「緯度・経度」などによって、
表示される内容が異なる。


「名称」「住所」「緯度・経度」は、
特定の場所が表示されるが、
「カテゴリー」「キーワード」での検索では、
当てはまる複数の場所が表示されることもある。



「特定の場所」を表示する「GoogleMap」への「リンク」を記述する書式

https://www.google.com/maps/search/?api=1&query=キーワード+キーワード+.......


https://www.google.com/maps/search/?api=1&query=名称
https://www.google.com/maps/search/?api=1&query=名称+カテゴリー+キーワード
https://www.google.com/maps/search/?api=1&query=名称+カテゴリー+キーワード+緯度+経度
https://www.google.com/maps/search/?api=1&query=名称+カテゴリー+キーワード+緯度+経度

https://www.google.com/maps/search/?api=1&query_place_id=プレイスID
https://www.google.com/maps/search/?api=1&query=名称+カテゴリー+キーワード&query_place_id=プレイスID
https://www.google.com/maps/search/?api=1&query=緯度+経度&query_place_id=プレイスID



パラメータ

パラメータ省略可否説明
query必須 地図上で表示する場所を「指定」する「パラメータ」。
「名称」「地名」「住所」「カテゴリー」「キーワード」「緯度」「経度」などを
「+」で繋げて入力する。

「query」パラメータは、すべての検索リクエストで「必須」の情報。
必ずリンクを作成したときに組み込むことが必要。
「文字列」は、「URLエンコード」をする必要があり、
「Name+Category+Keyword+Street+Address」
というような書式で記述する。
query_place_id省略可 「query_place_id」パラメータは、
場所を識別するテキスト表記のID「プレイスID」のことを意味している。
「query」パラメータと併用した場合は、
「query」パラメータで見つからない場合、
「query_place_id」の「プレイスID」が使用される。

「プレイスID」を持つ場所を
正確に表示する場合に使用すると便利。

「プレイスID」は、「プレイスID検索ツール」で検索することができる。


Back

「ルート」が表示される「GoogleMap」の地図へリンクを作成する方法


「ルート」が表示された
「GoogleMap」の地図へリンクを作成するには、
指定された「書式」で記述された「URL」へとリンクを作成する必要がある。


「ルート」を表示する「GoogleMap」へのリンクは、
https://www.google.com/maps/dir/


「ルート」を表示する「GoogleMap」へのリンクを記述する書式

https://www.google.com/maps/dir/?api=1&parameters


https://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=driving
https://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=bicycling
https://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=walking
https://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=transit


https://www.google.com/maps/dir/?api=1&origin=名称+住所+キーワード+緯度+経度&destination=名称+住所+キーワード+緯度+経度&travelmode=driving&waypoints=名称|名称|名称|名称|名称





パラメータ

パラメータ省略可否説明
origin未設定でも可能 表示するルートの「出発点」を指定する「パラメータ」。

設定されていない場合は、
「出発地を入力するための空のフォーム」が表示される。
「指定値」は、「場所の名前」「住所」「緯度・経度」などで指定。
文字列は、「URLエンコード」された
「名称+住所+緯度+経度」
という書式で入力する必要がある。

「origin_place_id」を指定する場合は、「origin」パラメータは必須となる。
origin_place_id省略可 「場所ID」を指定する「パラメータ」。
使用する場合は、「origin」パラメータも必須。
destination必須 表示するルートの「到着点」を指定する「パラメータ」。
入力しないと、入力するための「空白のフォーム」が表示される。
「指定値」は、「場所の名前」「住所」「緯度・経度」などで指定。
文字列は、「URLエンコード」された
「名称+住所+緯度+経度」
という書式で入力する必要がある。

「destination_place_id」を使用する場合は、
「destination」パラメータは必須。
destination_place_id省略可 「場所ID」を入力して、「到着点」を指定するパラメータ。
使用する場合は、「destination」パラメータが必須となる。
travelmode省略可 「移動手段」を指定する「パラメータ」。
指定できるのは、
・driving
・walking（可能な場合、歩道や歩道を優先）
・bicycling（自転車専用道路と、可能な場合にご希望の通りを経由する）
・transit

「travelmode」が指定されていない場合は、関連性の高いモードが自動判断されて表示される。
dir_action=navigate省略可 表示された「GoogleMap」で「ナビゲーション」を行うかを指定する「パラメータ」。 設定を指定しても、
使用できない環境の場合は「無視」される。
waypoints省略可 「ルート」の「中間地点」を指定する「パラメータ」。
「複数の地点」を指定するには、
「パイプ文字（|）」を使用して、「場所」を指定する。
（入力例: Berlin,Germany|Paris,France）

指定できる地点の数は、
環境によって異なるが、
「モバイルブラウザ」では「3地点」
「PCブラウザ」では「9地点」まで可能。

中間地点の経由順序は、
指定した「URL」の順番で表示される。
中間地点の指定は、「場所の名前」「住所」「緯度・経度」で指定可能。


Back

「マーカー」などが何も表示されない「GoogleMap」へのリンクを作成する方法


「マーカー」「ルート」などが含まれていない「地図」へのリンクも作成できる。

「マーカー」「ルート」などが含まれていない「地図」は、
https://www.google.com/maps/@?api=1&map_action=map
へとリンクさせる。



「マーカー」「ルート」などが含まれていない「地図」への「リンク書式」

https://www.google.com/maps/@?api=1&map_action=map&parameters


https://www.google.com/maps/@?api=1&map_action=map&center=緯度,経度&zoom=12&basemap=terrain



パラメータ

パラメータ省略可否説明
map_action=map必須 表示する「地図の種類」を指定する「パラメータ」。
地図を確実に表示するために、「map_action」を「map」に指定する必要がある。
center省略可 「地図ウィンドウ」の「中心位置」を定義する「パラメータ」。
「緯度・経度」の「座標」で指定する。
書式は、「カンマ区切り値（-33.8569,151.2152 など）」。
zoom省略可 「地図の初期ズームレベル」を指定する「パラメータ」。
指定可能な値は、「0（全世界）」から「21（個々の建物）」までの「整数値」。
「デフォルト値」は、「15」。
basemap省略可 「表示する地図タイプ」を指定する「パラメータ」。
値は、「roadmap（デフォルト）」「satellite」「terrain」のいずれか。
layer省略可 地図上に表示する追加のレイヤを定義する「パラメータ」。
デフォルト値は、「none」。
「transit」「traffic」「bicycling」が指定可能。


Back

「ストリートビュー パノラマ」を表示する「GoogleMap」への「リンク」を作成する方法


「ストリートビュー」で表示された
「GoogleMap」にリンクを作成することも可能。

「ストリートビュー パノラマ」を表示する「GoogleMap」へのリンクは、
https://www.google.com/maps/@?api=1&map_action=pano
にリンクを作成する。


「ストリートビュー パノラマ」を表示する「GoogleMap」へのリンク書式

https://www.google.com/maps/@?api=1&map_action=pano&parameters


https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=緯度%2C経度&heading=-45&pitch=38&fov=80
https://www.google.com/maps/@?api=1&map_action=pano&pano=パノラマID&viewpoint=緯度%2C経度&heading=-45&pitch=38&fov=80
https://www.google.com/maps/@?api=1&map_action=pano&pano=パノラマID



パラメータ

パラメータ省略可否説明
map_action=pano必須 「ストリートビュー」を表示することを指定する「パラメータ」
viewpoint必須 「パノラマ画像」を表示する指定をする「パラメータ」。 指定した場所に、最も近い場所で撮影された「パノラマ画像」を表示する。
指定方法は、「緯度・経度」を「カンマ区切り座標（例: 46.123456,10.123456）」で指定。

表示される画像は、「更新」される度に異なる画像となる可能性が高い。
定期的な更新と投稿される頻度によって、
画像がその都度、変化するようになっている。
「パノラマ画像」が見つからない場合は、「GoogleMap」のデフォルトモードで、指定場所の地図が開く。
pano必須 表示するパノラマ画像が指定できる
「パノラマID」をを指定する「パラメータ」。
「viewpoint」も同時に指定し、
「パノラマID」が利用できないときは、
「viewpoint」で指定された場所の「パノラマ画像」となる。
「パノラマ画像」が見つからない場合は、「GoogleMap」のデフォルトモードで、指定場所の地図が開く。
heading省略可 方角を指定する「パラメータ」。
指定方向は、「北（0）」から「時計回り」：の「角度」を指定する。
「指定値」は、「-180 ～ 180」の「360度」が指定可能。
pitch省略可 「カメラ」の「上下の角度」を指定する「パラメータ」。
「ピッチ」の「指定値」は、「-90 ～ 90」 の度数で指定可能。
「正の値」では、カメラは「上向き」、
「負の値」では、カメラは「下向き」となる。
「デフォルトのピッチ」は、「0」。
fov省略可 画像の「水平画角」を指定する「パラメータ」。
視野は、「10 ～ 100」の値で指定可能。
「デフォルト値」は、「90」。
「数値が小さい」ほど「ズームレベルは高い」。


Back