勉強したことのメモ

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の文末

下記みたいなコードがあって、文末に「;」が 無いのになんで動くのこれ? となった ...

javascript_logo_unofficial-300x300
JavaScriptでURLのクエリを取得する2

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

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

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

javascript_logo_unofficial-300x300
JavaScriptで年齢計算

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

javascript_logo_unofficial-300x300
JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

javascript_logo_unofficial-300x300
javascriptでランダム英数字

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

javascript_logo_unofficial-300x300
javascriptでメモリ開放

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

javascript_logo_unofficial-300x300
javascriptのfor文で負荷軽減

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

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

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

jquery_logo
jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...