勉強したことのメモ

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

  関連記事

highcharts.jsについて

プログラムの作りかえを行う際、既存のソースで highcharts.jsを使って ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...

JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

javascriptのfor文で負荷軽減

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

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

JavaScriptで住所から経度緯度を取得する

やりたかった事はformに住所を入れてsubmitする際に、javascript ...