勉強したことのメモ

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

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

      2015/04/22

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映させたかった。調べてみるとHTML5のGeolocation APIというものが使えそう。

 

■対応ブラウザ

IE9~ / FireFox3.5~ / GoogleChrome 5~ / Safari 5~

 

■取得のみのコード

非同期通信を行う為、ソースが上から順番に読まれるわけではなく、処理順が変わってくるため注意。位置情報取得処理後に違う処理をしたい場合は、考えないといけないのが面倒。

以下にGoogleMapAPIに反映させるサンプルとソース。

 

■サンプル

http://sample.taitan916.info/geolocation/

 

■ソース

 

■その他

ブラウザによってリロードのたびに許可を求められるものと求められないものがあった。一度取得したものは10分ぐらいキャッシュさせとくのが良いかも。

 - javascript

  関連記事

mzl.qobqfuxq
GoogleMapで都道府県の中心地と県庁所在地

GoogleMapで都道府県の中心地もしくは県庁所在地にマーカーを立てたかった。 ...

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

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

javascript_logo_unofficial-300x300
javascriptでメモリ開放

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

javascript_logo_unofficial-300x300
javascriptで論理和演算子の特殊な使い方

論理和「||」の特殊な使い方を教わったのでメモ。 普段使うのは、 if (a = ...

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

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

javascript_logo_unofficial-300x300
3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

javascript_logo_unofficial-300x300
JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

javascript_logo_unofficial-300x300
highcharts.jsについて

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

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

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

110126-HTML5_Logo
HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...