透過網址開啟地圖 APP 並顯示特定地點資訊

4 min readAug 12, 2018

在網站上想利用連結讓使用者連到地圖快速查詢，並且在手機上開網頁時能夠直接開啟地圖 app，可以組成網址來達到。目前根據實驗結果(2018年8月)，台灣的地點用 Google Map 比使用 Apple Map 更容易取得精準的地點標示和相關資料。

Google Maps URLs

使用 Google Maps URLs 不需要金鑰，根據下述文件根據所需情境組出網址即可使用。

Developer Guide | Maps URLs | Google Developers

Maps URLs provide a universal URL scheme to launch Google Maps from any platform.

developers.google.com

例如在 PyLadies 官網要顯示在 台北市婦女館 的位置，並以 marker 顯示位置，適合使用 search 的情境，使用以下網址，parameters 包括經緯度和選填的 PlaceID。

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

首先要找出經緯度。參考下列文件：

找出或輸入經緯度 - 電腦 - Google 地圖說明

您可以利用 GPS 的經緯度座標來搜尋地點，也可以取得 Google 地圖上已知地點的座標。除了經緯度以外，您還可以在沒有地址的情況下使用 plus code 分

support.google.com

台北市婦女館的經緯度是 25.033459,121.501280 。

通常組網址有經緯度來組 query string 已經足夠，但是想要 marker 不只是顯示經緯度，還要顯示地點資下，需要搭配 Place ID 。到下面這頁找 Place ID：

Place IDs | Places API | Google Developers

var map; function initialize() { // Create a map centered in Pyrmont, Sydney (Australia). map = new…

developers.google.com

有時在這頁預設開的位置不是你的所在位置，像我碰到預設開在雪梨，所以先拉到所想要找地點的所在城市，接著輸入 “完整正確” 的地點名稱，並且從下拉選單選地點，才會顯示 Place ID 。(為什麼台北市婦女館有時在 Google Map 會以簡體顯示？這不是我打字的內容，是點選地點後顯示的。)

按了 enter 畫面上又變繁體字了，並有 Place ID 可以複製。

有了上述經緯度，就可以組出如下的網址：

https://www.google.com/maps/search/?api=1&query=25.033459,121.501280&query_place_id=ChIJaRFJC6-pQjQRx9I-a2QVtYI

使用者點擊時，如果所使用裝置裝有 Google Map APP，會開啟 APP 並且顯示相關地點與資料。如果沒有安裝 Google Map APP，會開啟網頁版的 Google Map 顯示地點資訊。

iOS Map Links

如果想要開啟 Apple Map APP (Mac 和 iOS 裝置都有)，可以利用 Map Links Schemes 來組連結。以下兩篇第一篇為 Apple 官方文件，第二篇是討論。不過試了幾個排列組合，針對 台北婦女館 無法精準定位並顯示地點資料。

Map Links

Describes the URL schemes used to communicate with standard iPhone applications.

developer.apple.com

How to launch Google Maps on iPhone via web link?

I am building a site that will have address links as well as image of a map — both of which have a link to Google Maps…

stackoverflow.com

Apple Map 的測試，目前以地址搜尋時 marker 所在位置較精準，但是沒有地點名稱和更近一步資料。