プッシャーを使用して地図にマーカーを追加しますか？

Question

私は自分のサイトの人のIPに基づいて表示するためのマップを作成しようとしています。私はマップを打っていた世界中のすべての場所を示すすばらしい地図を考えていました。しかし、私は少し問題になった。私はipを追跡してからGeoクエリで処理し、最後にpusherappを使って地図にデータを投稿しています。しかし、私は自分のサイトにdatatoを追加することで、順不同のリストを作ることができるようになりましたが、Googleマップに追加する方法やデータを使ってそのマップを再描画する方法がわかりません。誰かがここで私を助けることができる？ だから、基本的にサーバー側で：

クライアント側で続い

var bounds = new google.maps.LatLngBounds(); 
var latlng = new google.maps.LatLng(#{@a.lat}, #{@a.lng}); 

    var marker = new google.maps.Marker({ 
     animation: google.maps.Animation.DROP, 
     icon: 'images/marker.png', 
     map: map, 
     position: latlng, 
     title: 'Here' 
    }); 

    bounds.extend(latlng); 
    map.fitBounds(bounds); 

：

channel.bind('latitude', function(data){ 
$('#list').append(data); 
}); 

しかし、私はそれがスクリプトセクションにウンチしてもらう場合でもそのグーグルマップはどのように知っているために起こっています更新するには？ 私はこのすべてをRailsに残しておきたいと思います。サービスのためには今はプッシャーを使用しています ありがとう！

Answer 1

私たちのサービスを使用していただきありがとうございます。

私たちのpresence functionalityを使用して、あなたのサイトから離脱して参加するユーザーを追跡する必要があります。

プレゼンス機能の一部は、ユーザーがチャンネルを購読すると、サーバーにAJAX呼び出しが行われることです。その呼び出しの中であなたはあなたのIPルックアップを行い、そのルックアップの詳細（私はちょうど緯度と経度の値を示唆します）をプレゼンスリクエストにuser_infoとして返します。詳細については、Authenticating Usersを参照してください。これらのドキュメントはまた、ユーザーを認証し、そのユーザーに対してuser_infoを提供するRailsの例を提供します。

ユーザーがクライアントのプレゼンスチャネルにサブスクライブすると、initial list of connected usersが表示されます。そのユーザーリストをループして各ユーザーの情報を取得し、Googleマップにマーカーを追加することができます。新規ユーザーが参加すると、チャンネルにmember_added eventsが表示され、新しいマーカーを追加できます。ユーザーが離れるときにmember_removed eventが表示され、マーカーを削除できます。

クライアントコードの例は次のようになります。

var channel = pusher.subscribe('presence-site-map-channel'); 

// Initial list of users on the site 
channel.bind('pusher:subscription_succeeded', function(members) { 
    members.each(function(member) { 
    addMember(member); 
    }); 
}); 
channel.bind('pusher:member_added, addMember); 
channel.bind('pusher:member_removed, function() { /* TODO: implement */}); 

function addMember(member) { 
    var bounds = new google.maps.LatLngBounds(); 
    var latlng = new google.maps.LatLng(member.info.lat, member.info.long); 

    var marker = new google.maps.Marker({ 
    animation: google.maps.Animation.DROP, 
    icon: 'images/marker.png', 
    map: map, 
    position: latlng, 
    title: member.info.id // each user must have a unique ID and you could use it here 
    }); 

    bounds.extend(latlng); 
    map.fitBounds(bounds); 
};