wtpmj.com » Google Latitudeの代わりを作ってみた

Google Latitudeの代わりを作ってみた

2013 年 11 月 16 日コメントをどうぞコメント

2013年8月9日をもって、Google Latitudeのサービスが終了しました。

今までは、このサービスを使って、自分がどこにいるのかブログパーツで知らせていました。
GPS内蔵の携帯やスマホを通じて(セキュリティ上から手動で)現在地を更新し、ブログパーツ化したGoogleマップの上にその現在地(最終更新地)が表示されるので、非常に便利でした。
しかし、利用者が少なかったのか、儲からないであろうこの事業からは手を引いたようです。

そこで、何とか代替品を作るべく、とりあえずiPhoneで動く(現在地更新ができる)ことを目標に、立ち上がりました。

まず現在地を取得する方法ですが、最近のブラウザは標準で現在地(つまり緯度・経度など)を取得できるようです。
これはHTML5のGeolocation APIという仕様によるものらしく、パソコンだとIPアドレスなどから取得するので不正確ですが、iPhoneなどではGPSからなので、かなり正確な現在地を取得してくれます。
つまり、iPhoneでブラウザからスクリプトにアクセスすることで、現在地が簡単に取得できます。

後は取得した緯度と経度をGoogleマップに渡してやれば現在地の表示は比較的簡単にできるはず。
表示させると同時に、自分のサーバーに位置情報を書き込む。
ブログパーツではその位置情報を読み込み、毎回Googleマップに渡して表示すれば・・と頭の中で仕様が大体出来上がりました。

それでは早速作ってみましょう。

1.JavaScriptで現在地を取得
現在地取得コードを書きます。

<script type="text/javascript">
//現在地情報を取得
function cont_get_current_gps(){
if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; }
navigator.geolocation.getCurrentPosition(
function(position){
var ido = position.coords.latitude;
var keido = position.coords.longitude;
document.idokeido.lati.value = ido;
document.idokeido.long.value = keido;
} ,
function(){
alert('Error!');
}
);
}
</script>

//現在地情報を取得

function cont_get_current_gps(){

if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; }

navigator.geolocation.getCurrentPosition(

function(position){

var ido = position.coords.latitude;

var keido = position.coords.longitude;

document.idokeido.lati.value = ido;

document.idokeido.long.value = keido;

} ,

function(){

alert('Error!');

}

);

}

</script>

<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();">

1	<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();">

2.フォームに現在値を渡す
取得した10進数の緯度と経度は、フォームに渡されます。
普通のフォームなので、手動でも位置情報が書けるようになっています。

<form method="post" action="" name="idokeido">
緯度<input type="text" name="lati" size="10"><br>
経度<input type="text" name="long" size="10"><br>
<input type="submit" value="送信">
</form>

緯度<input type="text" name="lati" size="10"><br>

経度<input type="text" name="long" size="10"><br>

</form>

3.データを保存する
フォームに入った緯度と経度は、PHPによりサーバーに保存されます。
今回は簡単なテキストにしましたが、KML形式で出力するとより良いでしょう。

<?php
$lati = $_POST['lati'];
$long = $_POST['long'];
if ($lati &amp;&amp; $long) {
$fp = fopen('here.txt', 'w');
fwrite($fp, "{$lati},{$long}");
fclose($fp);
echo  <<< EOM
<iframe id="disp" src="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&amp;z=13&amp;output=embed" width="100%"></iframe>
EOM;
}
?>

<?php

$lati = $_POST['lati'];

$long = $_POST['long'];

if ($lati && $long) {

$fp = fopen('here.txt', 'w');

fwrite($fp, "{$lati},{$long}");

fclose($fp);

echo <<< EOM

EOM;

}

4.データを読み込んで現在地を表示する
表示用PHPが位置情報のテキストを読み込み、マップを開きます。
あとはiframeなどでブログに貼りつければブログパーツとしても使えます。

<?php
$width = $_GET["width"];
if(!$width){
$width = "100%";
}
$height = $_GET["height"];
if(!$height){
$height = "100%";
}
$z = $_GET["z"];
if(!$z){
$z = "13";
}
$fp = fopen('here.txt', 'r');
$lines = fgets($fp);
$arr = explode(",",$lines);
$lati = $arr[0];
$long = $arr[1];
fclose($fp);
echo  <<< EOM
<iframe src="http://maps.google.co.jp/maps?ll={$lati},{$long}&amp;z={$z}&amp;output=embed" width="{$width}" height="{$height}" frameborder="0"></iframe><br>
<a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&amp;z={$z}">大きな地図で見る</a>
EOM;
?>

<?php

$width = $_GET["width"];

if(!$width){

$width = "100%";

}

$height = $_GET["height"];

if(!$height){

$height = "100%";

}

$z = $_GET["z"];

if(!$z){

$z = "13";

}

$fp = fopen('here.txt', 'r');

$lines = fgets($fp);

$arr = explode(",",$lines);

$lati = $arr[0];

$long = $arr[1];

fclose($fp);

echo <<< EOM

<a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z={$z}">大きな地図で見る</a>

EOM;

上記のまとめはこちらです。
これらのファイルをサーバーの同じ場所に置いてアクセスして下さい。

参考サイト:
http://www.pxt.jp/ja/diary/article/254/index.html
http://ascii.jp/elem/000/000/433/433470/index-3.html
http://blog.fonland.net/2010/06/javascript-iphone-gps.html
http://d.hatena.ne.jp/yatt/20130208/1360316179
http://www.shurey.com/html/googlemaps.html
http://www.phpbook.jp/func/file/index4.html
http://ponk.jp/php/file/write
http://www.php-ref.com/b2api/04_fgets.html
http://phpspot.net/php/man/php/function.explode.html
http://libro.tuyano.com/index3?id=410001&page=3
http://www.geocities.jp/eijispace/2012/0220.html
http://d.hatena.ne.jp/takaxi/20111211/1323575933

Enjoy!

追記：
改造したWebアプリ版をひっそり公開。
iPhoneなどで自分の場所を取得し、その情報を短縮URL化します。
これを使えば、iMessageなどで自分の場所を友達と共有できます。
iframe対応のブラウザでご覧ください。

カテゴリー: ウェブサイト構築タグ: Google Latitude, Google Maps, GPS, iPhone, JavaScript, PHP, 地図

コメント (0) トラックバック (0) コメントをどうぞトラックバックURL

コメントはまだありません。

トラックバックはまだありません。

iPhoneで営業マンや子供の管理容積重量とは

Google Latitudeの代わりを作ってみた

カテゴリー

アーカイブ

ベストセラーなう！

最近のコメント

ブログロール

メタ情報

Google Latitudeの代わりを作ってみた

カテゴリー

アーカイブ

ベストセラーなう！

最近のコメント

タグクラウド

ブログロール

メタ情報