現在地からお店まで自動でルート案内するリンクの作り方
会社やお店のウェブサイトなら、必ずと言って良いほどGoogleマップで位置が表示されています。もしそれがスマホで表示できるなら、さらにルート案内するリンクをつけて、会社やお店までの経路や到着時間をスマホに表示させるようにして、もう一工夫してみましょう。 ルート案内の概要 ルート案内のリンクをクリックすると、設定した目的地までの経路をGoogleマップに表示する仕組みです。PCでクリックするとGoogleマップでルートを表示します。AndroidやiPhoneなどでタップすると、Googleマップアプリへ誘導されますので、アプリのルート案内が使えます。 ルートの設定は「現在地から目的地」だでけはなく、「任意の出発地から目的地」の設定も可能です。また出発地や目的地は、名前・住所・座標(緯度,経度)で設定することができます。 到着時間が、現在の交通状況が加味されて計算されるので、なかなか便利だと
地理空間情報Webアプリの開発(4) - 合同会社ミドリアイティ
前回までに、地理空間情報を活用したモバイルWebアプリケーションのサーバー環境を構築し、サーバー側プログラムを開発しました。 そこで今回は、簡単なクライアント側プログラムを開発します。 今回開発するプログラムは、現在地を中心としたOpenStreetMap上に、近くの応急給水拠点をマーカーで表示するというものです。 HTMLファイルの完全なリストは以下の通りです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>現在地近くの応急給水拠点</title> <style> html, body { padding: 0; margin: 0; height: 100%; } #mapdiv { height: 100%; width: 100%; } </style> <script type="text/javascri
Leaflet – OSMにgeoJSONでマーカーをつけたりできる便利なJavaScriptライブラリ
#map { height: 180px; } 地図のデフォルト値を設定して、描画する // 地図のデフォルトの緯度経度(51.505, -0.09)と拡大率(拡大レベル13) var map = L.map('map').setView([51.505, -0.09], 13); // 描画する(Copyrightは消しちゃダメよ) var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors, CC-BY-SA', maxZoom: 19 }); 特定の座標にマーカーを置く L.marker([50.5, 30.5]).addTo(map); 動作サンプル See the Pen raGPex by
[OpenLayers] OpenLayers によるOpenStreetMap の表示
作成日 2015年1月22日（木曜）10:38 | 最終更新日 2015年1月22日（木曜）17:24 | 作者: 森 純一 | 参照数: 317 バスロックの各クライアントでの地図表示には、OpenStreetMap を使っています。今まではAndroid の専用クライアントでの表示でしたが、ブラウザでも見れるようにしたいと考えています。 そこで、OpenStreetMap をブラウザで表示する方法を試してみました。具体的には、OpenLayers というライブラリを使って表示することになります。ここでは、OpenLayers を使ったOpenStreetMapの表示方法をまとめておきます。 OpenStreetMap について 実際の表示方法の前に、OpenStreetMap についてちょっとまとめておきます。OpenStreetMap というのは、 OpenStreetMap(OSM
![[OpenLayers] OpenLayers によるOpenStreetMap の表示](https://cdn-ak-scissors.b.st-hatena.com/image/square/aae1232f17bb34ce91aae47893e42055040bc989/height=288;version=1;width=512/http%3A%2F%2Fmori-soft.com%2Fplugins%2Fcontent%2Ffb_tw_plus1%2Flinkcmp.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
