IT Design 旅 PetLife Life for English RenojiStock AboutUs
ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法【XML】サイトマップ作り方
「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】「ルビ」をふるための要素
SEO（Search Engine Optimization）
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法





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