勉強したことのメモ

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

GoogleMapAPIで現在地を更新する方法

      2015/04/24

GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後に現在地を移動すればリアルタイムもしくはボタンを押した際に、現在地マーカーを移動させたかった。つまりカーナビ的な現在地の表示をGoogleMapで再現したかった。

必要そうなのは以下。

 

■仕様

・現在地を取得してマーカー設置

・目的地にもマーカー設置

・リアルタイムに現在地のマーカー場所を変えるか、ボタンを押した際にマーカーの位置を変える

 

■サンプル

リアルタイム更新

http://sample.taitan916.info/gps/index.php

手動更新

http://sample.taitan916.info/gps/index2.php

 

■ソース

リアルタイム更新

 

手動更新

 

■その他

手動更新に関して

リアルタイムな自動更新だとスマホの電力を食うらしい。なので手動更新バージョンを使うケースもありそう。

 

マーカーの移動

マーカーを現在地用とその他用に分けないと、移動させるという部分の実装が分からなかった。同じような関数が2個あるのは気になるのでなんとかしたい。

 - javascript

  関連記事

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

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

javascript_logo_unofficial-300x300
クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

javascript_logo_unofficial-300x300
javascriptで画像を取り扱う際の注意

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

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

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

javascript_logo_unofficial-300x300
JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

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

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

javascript_logo_unofficial-300x300
他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

javascript_logo_unofficial-300x300
JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

javascript_logo_unofficial-300x300
javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

javascript_logo_unofficial-300x300
javascriptでメモリ開放

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