勉強したことのメモ

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で実行時間の測定

var time_test = function(){ var x = 1; f ...

javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

javascriptでメモリ開放

今まで考えたこと無かったけどjavascriptを使う際は メモリ消費に気をつけ ...

JavaScriptの三項演算子

いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...

ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

prototypeとjqueryの競合

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

setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

javascriptのfor文で負荷軽減

javascriptで配列の数だけループをまわす際、 for (i=0; i&l ...

JavaScriptでURLのクエリを取得する

やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...