2011年7月1日 星期五

facebook 打卡 api 應用 (搭配google map)

偽打卡
使用facebook checkin api,搭配google map
經過facebook connect login後
可神遊到其他地方打卡
展示 http://checkin.978.tw/

facebook打卡範例 : http://blog.978.tw/2011/04/facebook-check-in-api-graph.html

google map部分實作範例教學:

var map;
var infowindow;
function checkin(id,lat,lng){ //打卡
    $.get('facebook_checkin.php',{'id':id,'lat':lat,'lng':lng},function(o){
        alert(o);
    });
}
function infoWindow(lat,lng){
    if( infowindow ){ //關閉上一個對話框
        infowindow.close();
    }
    var place_content = '點選下列地點後打卡<br>';
    $.get('facebook_place.php',{'lat':lat,'long':lng},function(o){
            for( var i=0; i<o.length; i++ ){ //可打卡地點
                if(o[i].name!=undefined){
                    place_content += '<a href="javascript:checkin('+o[i].id+','+lat+','+lng+');">'+o[i].name+'</a><br>';
                }
            }
            infowindow = new google.maps.InfoWindow(
                     { content: place_content,
                       size: new google.maps.Size(50,50),
                       position: new google.maps.LatLng(lat,lng)
                     });
            infowindow.open(map);

    });
}

function map_init(){ //google map
    var myLatlng = new google.maps.LatLng(25.047795,121.516900);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        var lat = event.latLng.Ia;
        var lng = event.latLng.Ja;
        infoWindow(lat,lng);
    });
}

$(document).ready(function(){
    $('#map_canvas').css({height:$(window).height()*0.8,width:$(window).width()});
    map_init();
});
 

 

3 則留言:

  1. 您好~在找資料剛好看到你的這個東西,想問一下

    小弟目前在某間公司上班,老闆希望可以藉由google maps打卡的形式,讓他可以確實掌握員工的出差行程之類的東西,意思大概是這樣,就是可能老闆坐在辦公室裡,A跟B都在國外,但是老闆忘了A跟B在哪裡又懶得看自己的東西,就藉由察看一張MAP就知到大家在哪。而也不只是老闆,可能在這個GROUP的所有成員都要看的到也能CHECK IN,這樣對公司本身也有幫助。

    這個的難度是只有一張MAP,然後要整個GROUP的分享,到現在都找不到相關的應用,請問用FB做的到嘛?

    這是我的EMAIL
    taiwanhiker@gmail.com

    回覆刪除
  2. 不知道這是不是你要的 http://www.google.com/latitude

    回覆刪除
  3. 網誌管理員已經移除這則留言。

    回覆刪除