iPhoneの位置情報とmixiアプリを連携してみた

iPhone OS 3.0からsafariのGeoLocationAPIがサポートされました。このAPIを使用するとjavascriptからiPhoneのGPS機能を使用することが出来ます。

今回はそのGeoLocationAPIを使ったサンプルをmixiアプリ上で動かしてみます。

以下がサンプルになります。

■サンプル（実際に動くやつ）

http://platform001.mixi.jp/view_appli.pl?id=3520
※ iPhoneで見てください

mixiアプリは現在オープンβなのである手順を踏まないと使用できません。
http://developer.mixi.co.jp/hello-social-world
http://journal.mycom.co.jp/news/2009/04/28/048/index.html

■GeoLocationAPIの使い方

watchPositionメソッドに成功時に実行されるcallbackと、エラー時に実行されるhandleErrorを引数に渡してあげます。

navigator.geolocation.watchPosition(callback, handleError);

■GoogleMap APIv3

先日のGoogleDevelopersDayで発表されたGoogleMapAPIv3を使ってGoogleMapを表示させています。
http://code.google.com/intl/ja/apis/maps/documentation/v3/

APIの呼び出し

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

緯度経度の設定

var latlng = new google.maps.LatLng(lat, lng);

地図の作成とオプションの設定

var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map,
    title:"You are here!"
});

■サンプルコード（全体）

Opensocial-jqueryの機能まったく使ってなくてごめんなさい。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="dokoiru">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javascript" src="http://exmaple.com/opensocial/js/opensocial-jquery/opensocial-jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javacript">
jQuery(function($) {
    var GeoLocation = function(){
    };
    GeoLocation.prototype = {
        watch: function(){
            navigator.geolocation.watchPosition(this.callback, this.handleError)
        },
        callback: function(location){
            //location.coords.latitude
            //location.coords.longitude
            //location.coords.accuracy
            var record = {latitude: location.coords.latitude, longitude: location.coords.longitude, accuracy: location.coords.accuracy },

            // googlemap api v3
            // API keyがいらないとか素敵
            // http://code.google.com/intl/ja/apis/maps/documentation/v3/
            var latlng = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
            var myOptions = {
                zoom: 14,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                position: latlng, 
                map: map,
                title:"You are here!"
            });   
        },
        handleError: function(e){
            console.log(e.code);
        }
    };

    var geolocation = new GeoLocation();
    // startボタン
    $("#start").click(function(){
        geolocation.watch();
        return false;
    });
});
</script>
<div id="map_canvas" style="width:300px; height:200px"><a href="#" id="start">位置情報の取得を開始する(データは保存されません)</a></div>
  ]]>
  </Content>
</Module>

GeoLocationAPIを動かしているだけなのでソーシャル的な機能はまったく使っていません（誰か作って

iPhoneGPS×mixiアプリで面白そうなアプリを作れそうな気がしています。
自分が思いついているアイデアはしょぼすぎるので公開しておきます。

マイミクの今いる位置が分かる
今いる位置を共有しつつ、近くなったら相手のプロフィールが見れるようになる（あんまソーシャルじゃないけど）