勉強したことのメモ

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

javascriptとかjQueryを使ってて、Firefox,chromeはい ...

javascript_logo_unofficial-300x300
JavaScriptで年齢計算

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

jquery_logo
テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

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

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

javascript_logo_unofficial-300x300
getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

javascript_logo_unofficial-300x300
JavaScriptでinputタグのtypeを変更

チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...

javascript_logo_unofficial-300x300
IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

javascript_logo_unofficial-300x300
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

やりたかった事は、 ・棒グラフと折れ線グラフを入れたい ・Y軸はそれぞれ違う値に ...

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

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

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

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