勉強したことのメモ

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

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

      2015/04/24

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

必要そうなのは以下。

 

■仕様

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

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

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

 

■サンプル

リアルタイム更新

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

手動更新

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

 

■ソース

リアルタイム更新

 

手動更新

 

■その他

手動更新に関して

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

 

マーカーの移動

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

 - JavaScript

  関連記事

JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

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

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

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

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

javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

IE&javascriptの予約語

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

lightboxでCSPエラーが発生

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

JavaScriptで年齢計算

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