勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

GoogleMapAPIで現在地取得と目的地までのルート表示

      2015/04/24

GoogleMapAPIを使って現在地を取得しつつ、目的地までのルートを表示させたかった。他にもマーカーをデフォルトじゃないものを使ったり、目的地&現在地以外にもマーカー立てたりと色々カスタムしたかった。

仕様をまとめると以下のようなもの。

 

■仕様

・基本的には現在地を取得して目的地までのルート線を引いたマップ

・目的地や現在地のマーカーはこちらで用意した画像を使う

・ルート線の色や太さを変えたい

・目的地、現在地以外にもマーカーを立てる場合もあり

・現在地が取得できない場合は目的地とその他マーカーのみ立てる

 

■サンプル

http://sample.taitan916.info/maproot/

目的地は通天閣で飛行機のマーカー、現在地はハートのマーカー、その他として大阪城をマグカップのマーカーで設置している。

 

■ソース

 

■その他

・非同期通信

非同期通信が絡むみたいで処理されていく順番や、スコープがどうなるのかがちょっとよく分からなかった。

 

・リアルタイム更新

出来るのか分からないけどカーナビみたいにリアルタイムで現在地を変更しつつ、ルート線も変更できるような形に作り変えたい。方法調べる。

 

・使用制限

GoogleMapAPIの使用制限として、地図の読み込みは1日あたり最大25000回までとのこと。個人利用や、店舗紹介ぐらいなら大丈夫そうだけど、マップがメインのサービスの場合はひっかかりそうなので覚えておく。

 

・公式リファレンス

https://developers.google.com/maps/documentation/javascript/directions?hl=ja

 

・参考サイト

http://www.google-mapi.com/googlemaps/route-two_points.html

 - javascript

  関連記事

javascript_logo_unofficial-300x300
javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

javascript_logo_unofficial-300x300
JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

javascript_logo_unofficial-300x300
JavaScriptで年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

jquery_logo
prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

android_logo2-300x224
Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。 担当外だった ...

javascript_logo_unofficial-300x300
IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

jquery_logo
テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

javascript_logo_unofficial-300x300
alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、 co ...

mzl.qobqfuxq
GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...