スマホでgooglemapの経路を開くリンク takumifukasa Follow 2018-02-14 16:42:38 License: MIT License Fork0 Fav0 View320 Play Stop Reload Fullscreen Smart Phone Readme ES6 26 lines HTML 1 lines CSS 10 lines スマホでgooglemapの経路を開くリンク Android https://www.google.co.jp/maps/dir/[出発地]/[目的地] 出発地, 目的地 ... 経度,緯度 or キーワード? iOS URLスキームで指定。google map app を開くかどうかのダイアログが出る。 comgooglemaps:// params saddr ... 出発地(経度,緯度 or キーワード?) diddr ... 目的地(経度,緯度 or キーワード?) directionsmode ... driving, transit, bicycling, walking 参考 https://developers.google.com/maps/documentation/ios-sdk/urlscheme?hl=ja http://apoc.jp/googlemap-route-link/ スマホでgooglemapの経路を開くリンク // 現在地 const from = encodeURIComponent("桜木町"); // 行き先 const to = encodeURIComponent("関内駅"); const ua = window.navigator.userAgent; const isAndroid = /Android/.test(ua); let href = ""; const link = document.getElementById("link"); if(isAndroid) { href = `https://www.google.co.jp/maps/dir/${from}/${to}`; link.addEventListener("click", function(e) { e.preventDefault(); if(confirm('google map へ移動します。')) { location.href = this.getAttribute("href"); } }); } else { href = `comgooglemaps://?saddr=${from}&daddr=${to}`; } link.setAttribute("href", href); <a id="link" href="">目的地</a> スマホでgooglemapの経路を開くリンク * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } # スマホでgooglemapの経路を開くリンク ## Android `https://www.google.co.jp/maps/dir/[出発地]/[目的地]` 出発地, 目的地 ... 経度,緯度 or キーワード? ## iOS URLスキームで指定。google map app を開くかどうかのダイアログが出る。 `comgooglemaps://` ### params saddr ... 出発地(経度,緯度 or キーワード?) diddr ... 目的地(経度,緯度 or キーワード?) directionsmode ... driving, transit, bicycling, walking ## 参考 https://developers.google.com/maps/documentation/ios-sdk/urlscheme?hl=ja http://apoc.jp/googlemap-route-link/ // 現在地 const from = encodeURIComponent("桜木町"); // 行き先 const to = encodeURIComponent("関内駅"); const ua = window.navigator.userAgent; const isAndroid = /Android/.test(ua); let href = ""; const link = document.getElementById("link"); if(isAndroid) { href = `https://www.google.co.jp/maps/dir/${from}/${to}`; link.addEventListener("click", function(e) { e.preventDefault(); if(confirm('google map へ移動します。')) { location.href = this.getAttribute("href"); } }); } else { href = `comgooglemaps://?saddr=${from}&daddr=${to}`; } link.setAttribute("href", href); <a id="link" href="">目的地</a> * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? # スマホでgooglemapの経路を開くリンク ## Android `https://www.google.co.jp/maps/dir/[出発地]/[目的地]` 出発地, 目的地 ... 経度,緯度 or キーワード? ## iOS URLスキームで指定。google map app を開くかどうかのダイアログが出る。 `comgooglemaps://` ### params saddr ... 出発地(経度,緯度 or キーワード?) diddr ... 目的地(経度,緯度 or キーワード?) directionsmode ... driving, transit, bicycling, walking ## 参考 https://developers.google.com/maps/documentation/ios-sdk/urlscheme?hl=ja http://apoc.jp/googlemap-route-link/ Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author takumifukasawa Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/mzzf/js"></script> library&test Discussion Questions on this code? Tags library&test
