GoogleMapへのリンクURL作成方法を調べた

サイトにGoogleMapを埋め込む場合、Googleが提供しているJavaScriptのAPIを使用するのが一般的です。

そうではなく、a要素で作るような単なるリンクを作成したい、という場合にどういう規則でURLを作成すればよいのか調べてみたものです。


## 前提
システム側で、マップを作成するための住所や緯度経度、建物名を保持していて、URLを自動生成するものとします。つまり、一つ一つの所在地をGoogleMapで調べてリンクを取得したり、短縮URLを取得していく方法は使いません。

### 更新

Google Maps APIを調べた結果の変更点のみ記載します。最新仕様は各自調べてください。また、見落とし等あるかもしれませんがご容赦ください。

|日付|内容|
|---|---|
|2019年5月29日|新規|
|2020年11月14日|`Display a map`に`layer`パラメータ追加|
|2021年3月28日|Google Mapへのリンクがリンクカードに置き換わっていたので通常のリンクに修正|

## 公式ドキュメント
https://developers.google.com/maps/documentation/urls/guide?hl=ja

`Maps URLs`という文書があり、そこに書いてあります。公式ドキュメントを引用すると、

簡単な解説

> Using Maps URLs, you can build a universal, cross-platform URL to launch Google Maps and perform searches, get directions and navigation, and display map views and panoramic images. 

Google翻訳結果

> GoogleマップのURLを使用すると、Googleマップを起動して検索を実行したり、方向やナビゲーションを取得したり、マップビューやパノラマ画像を表示したりするための、ユニバーサルでクロスプラットフォームのURLを構築できます。

使用について

> You don't need a Google API key to use Maps URLs.

Google翻訳結果

> Maps URLを使用するのにGoogle APIキーは必要ありません。

との記述がある通り、URLを使う場合Google API keyは不要です。手間なく扱えるようです。各OSでGoogle Mapアプリがインストールされている場合どういう挙動をするか、などについても書いてあります。

以下、上記ドキュメントに基づいて記載します。

## 作れるリンクの種類

### Search（検索）
特定の場所にピンを立てる、または一般的な検索のリクエスト

`https://www.google.com/maps/search/?api=1&parameters`という形式

仕様上、ズーム指定できません。

### Direction（道順）
指定した場所間の道順を表示するリクエスト

`https://www.google.com/maps/dir/?api=1&parameters`という形式

### Display a map（地図を表示）
SearchやDirectionと異なり、ピンや道順を表示せずに、単に地図を表示するリクエスト

`https://www.google.com/maps/@?api=1&map_action=map&parameters`という形式

### Display a Street View panorama（ストリートビュー表示）

ストリートビューのパノラマ画像表示のリクエスト

`https://www.google.com/maps/@?api=1&map_action=pano&parameters`という形式

## 試してみる
東京駅をターゲットにしてみます。GoogleMapで検索すると、緯度経度は`35.6812362,139.7649361` (緯度・・・latitude, 経度・・・longitude)となっているので、それを使いましょう。

検証には`Edge`を使っています。

### Search
パラメータは、`query`が必須、オプションで`query_place_id`を指定できます。
`query_place_id`は[https://developers.google.com/places/web-service/place-id?hl=ja](https://developers.google.com/places/web-service/place-id?hl=ja)で調べられました。

`query`と`query_place_id`の両方が指定された場合、`query_place_id`が示す場所が見つからない場合のみ、`query`で指定した検索が行われます。

[https://www.google.com/maps/search/?api=1&query=東京駅](https://www.google.com/maps/search/?api=1&query=東京駅)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/3be9eb08-518d-db45-027d-8af7cee61f9b.png)

ウィンドウ小さくした影響か、ピンは隠れていますが出てきます。日本語でそのまま検索しても、一応問題なく使えます。検証は必要かと思います。

次に緯度経度(緯度・・・latitude, 経度・・・longitude)です。
緯度、経度の順です。

[https://www.google.com/maps/search/?api=1&query=35.6812362,139.7649361](https://www.google.com/maps/search/?api=1&query=35.6812362,139.7649361`)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/158581a3-4503-f866-e2a2-b4d70319c13a.png)

こちらも問題ないですね。

東京駅周りの書店、なんて指定もできます。キーワードを`+`で区切ります。

[https://www.google.com/maps/search/?api=1&query=東京駅+書店](https://www.google.com/maps/search/?api=1&query=東京駅+書店)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/d54436ab-8443-53b2-44f0-68757540f07a.png)


### Direction
必須パラメーターは、

|パラメーター名|意味|
|---|---|
|`origin`|スタート地点|
|`destination`|目的地|

です。`Search`と同じく、`place_id`も使えるようです。

東京駅から横浜駅に行ってみます。

[https://www.google.com/maps/dir/?api=1&origin=東京駅&destination=横浜駅](https://www.google.com/maps/dir/?api=1&origin=東京駅&destination=横浜駅)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/d9ff08e2-d1e3-992a-9310-48c9d206b33a.png)

おお…これはすごい。ちゃんと出る。

以下、オプションのパラメーターを見ていきます。

#### travelmode
初期に表示される移動方法を指定できるようです。

* 車(driving)

[https://www.google.com/maps/dir/?api=1&origin=東京駅&destination=横浜駅&travelmode=driving](https://www.google.com/maps/dir/?api=1&origin=東京駅&destination=横浜駅&travelmode=driving)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/deb5144a-9259-1914-8d77-3a1efa732418.png)

おお…！

他にも指定できます。指定しない場合は、ルートやユーザー設定に基づいて選択されるそうです。

#### dir_action=navigate
経路案内してくれるパラメーターのようです。現在位置や区間に基づいて行われるようで、詳細な検証ができませんでした…。
経路案内できない場合は、このパラメーター無視するよ、と書いてあります。

#### waypoints
経由地を加味したルート検索を行ってくれます。`waypoints`に指定するのは、`origin`や`destination`と同じく、建物名や緯度経度等になります。複数指定する場合は`|`で区切ります。

経由地計算も、行えない場合は無視されるそうです。

### Display a map
[https://www.google.com/maps/@?api=1&map_action=map](https://www.google.com/maps/@?api=1&map_action=map)

と、パラメータ無しで開けます。この場合は現在地等に基づいた表示になるのだろうと思います。

以下、オプションのパラメーターを見ていきます。

#### center
中心点を指定します。緯度経度での指定になります。

[https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361](https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/49be59d9-e86f-aebb-b65d-bd64bbab9ee1.png)

東京駅が中心になりました。

#### zoom
地図の倍率を指定します。0～21だそうです。最大にしてみましょう。

[https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&zoom=21](https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&zoom=21)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/a1e053f7-638e-8e0a-0c51-a1d17ac8bf06.png)

最大は大きすぎますね。

#### basemap
地図タイプ指定です。roadmap（通常、未指定の場合これ）、satellite（衛星）、terrain（地形図）の三種類です。

* satellite

[https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&&basemap=satellite](https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&&basemap=satellite)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/f5b0d116-3a37-fa95-fb91-e83d121044d9.png)

* terrain

[https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&&basemap=terrain](https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&&basemap=terrain)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/e0689d53-0127-750e-0920-720157d500f4.png)

東京で地形図を出しても、高低差が無いのであまり意味が無いですね…

#### layer
追加レイヤーを表示したい場合、指定します。none（表示なし、未指定の場合これ）、transit（路線図）、traffic（交通量）、bicycling（自転車道）のいずれかが選択できます。

##### transit

地下鉄などの路線が色分けされます。

[https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&basemap=satellite&layer=transit](https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&basemap=satellite&layer=transit)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/e2acd12a-49e2-85dd-af38-ef3f5894ea17.png)


##### traffic

交通量を表示します。地図の下に**ライブ交通情報**という表示が増え、道路が色分けされます。

[https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&basemap=satellite&layer=traffic](https://www.google.com/maps/@?api=1&map_action=map&center=35.6812362,139.7649361&basemap=satellite&layer=traffic)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/32157502-899e-35f2-fc14-75bbdbbc12bc.png)


##### bicycling

自転車で通る場合の情報、ですかね。自転車専用道であるかどうかなどの情報が追加されます。

東京では表示されなかったので、アメリカのGoogle本社の座標に変えています。日本だと自転車専用道はあまり聞かないので、表示されないのかもしれません。

[https://www.google.com/maps/@?api=1&map_action=map&center=37.422061,-122.084525&basemap=satellite&layer=bicycling](https://www.google.com/maps/@?api=1&map_action=map&center=37.422061,-122.084525&basemap=satellite&layer=bicycling)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/1b8f5d3a-0795-48d1-4473-18b22b4a683a.png)


### Display a Street View panorama
基本URLは`https://www.google.com/maps/@?api=1&map_action=pano`です。が、これ以上パラメーターを指定しない場合は単にマップが開きます。

以下のいずれかが必須です。

|パラメーター|内容|
|---|---|
|`viewpoint`|表示する地点の緯度経度|
|`pano`|パノラマID|

両方指定した場合、`pano`で指定したIDのパノラマが見つからない場合に`viwepoint`を使用する、という挙動になるそうです。どちらでもパノラマ画像が見つからない場合は、マップのデフォルト挙動をするそうです。

試してみましょう。

[https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361](https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/8b0d50b5-0185-1a0d-25f4-caf0470b4d40.png)

思いっきり、駅構内みたいですね。

追加パラメーターも見ていきます。

#### heading
デフォルトを北として、そこから何度向き直すか、という指定です。

[https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361&heading=-90](https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361&heading=-90)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/0e2b31e5-f9c1-345d-0bec-5144f3aa6299.png)

-90だと、左を向くようです。つまりプラスだと（自分が）時計回りするイメージみたいです。

#### pitch
上を向くか下を向くか、という感じです。-90～90の範囲で指定します。

[https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361&heading=-90&pitch=45](https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361&heading=-90&pitch=45)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/e031819a-63bf-0ac8-ae03-11dae06c0163.png)

headingと同じ位置で45度上を向いてみました。なるほど。

#### fov
ズーム倍率、のようです。値が小さいほどズーム倍率が大きくなる（近くなる）ようです。

[https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361&heading=-90&fov=40](https://www.google.com/maps/@?api=1&map_action=pano&parameters&viewpoint=35.6812362,139.7649361&heading=-90&fov=40)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/2eccb88b-b869-776f-98ad-8092cf660488.png)


## 余談
これらのURLを使って、ブラウザからGoogleMapにアクセスすると、URLが別のもの（GoogleMapが使用するもの）に置き換わります。そのURLはGoogleの仕様によって変わりうると想定されます。

なので、URLを生成する場合はAPIに準拠した形で生成するほうがよさそうですね。

## おためし：Geolocation APIと組み合わせる
デザインは適当です。また、細かいエラーチェック等は割愛しています。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="mapper">現在地を取得して経路を出す</button>
    <script src="main.js"></script>
</body>
</html>
```

上のようなHTMLを用意して、

```javascript:main.js
const btn = document.getElementById("mapper");
btn.addEventListener("click", e => {
    if (navigator.geolocation) {
        //Geolocation APIを利用できる環境向けの処理
        const navi = navigator.geolocation;
        navi.getCurrentPosition((pos) => {
            const latlng = `${pos.coords.latitude},${pos.coords.longitude}`;

            const link = `https://www.google.com/maps/dir/?api=1&origin=${latlng}&destination=東京駅`;

            const anchor = document.createElement("a");
            anchor.text = "GoogleMapで経路を見る"
            anchor.target = "_blank";
            anchor.href = link;
            document.body.appendChild(anchor);
        });
    } else {
        //Geolocation APIを利用できない環境向けの処理
    } 
});
```

上のようなJavaScriptを用意します。すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/8777fc67-d429-78e8-daa7-8bf292c4a23e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/86b1baf5-c335-c9c0-278a-974f0fddb64a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15429/d4657c75-ea5f-f515-e67a-8fca79e382b8.png)


ユーザーの許可を得て現在位置を取得した上で、Directionを指定してGoogleMapを呼び出す、なんてこともできますね。

使い方次第でいろいろ便利かもしれない、と思った次第です。