勉強したことのメモ

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で正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

javascript_logo_unofficial-300x300
JavaScriptで連想配列を数値でソート

数字の大きい順でソートしたかったんだけど、 色々調べてhash.sort云々やっ ...

javascript_logo_unofficial-300x300
リンク部分にマウスオーバーでツールチップを表示(nicetitles.js)

既存のソースにて見たことの無いプラグインが 使われていたのでメモ。 ■参考 ht ...

jquery_logo
jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

javascript_logo_unofficial-300x300
youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

javascript_logo_unofficial-300x300
jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

javascript_logo_unofficial-300x300
javascriptで実行時間の測定

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

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

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

javascript_logo_unofficial-300x300
サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...