Question

I am working to create a map to show based upon IP’s of the people on my site. I was thinking a cool map showing all the places around the globe that were hitting the map. But I have come into a little issue. I have the ip’s being tracked, and then from their they are processed in a Geo query, and finally I’m using pusherapp to post the data to the map. However, now I can make a unordered list, by appending the datato my site, but I can’t figure out how to add it to my google map, nor have that map redraw with the data. Can someone help me here?
So basically on the server side:

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);

followed by on the client side:

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

But even if I do get it to plop into the script section is that google map going to know how to update?
I would really like to keep this all in Rails, and for the service I’m right now using pusher
Thanks!

Answer 1

thanks for using our service.

By the sounds of it you should be using our presence functionality so that you can keep track of users leaving and joining your site.

Part of the presence functionality is that when a user subscribes to a channel an AJAX call is made to your server. Within that call you can do your IP lookup and then return the details (I would suggest just the lat and long values) of that lookup as the user_info to the presence request. See Authenticating Users for more information on this. These docs also provide a Rails example of authenticating a user and providing user_info for that user.

When any user subscribes the the presence channel in the client they will get an initial list of connected users. You can loop through that user list and get the info for each user and add a marker to the Google map. When new users join you will get member_added events on the channel and you can add a new marker. When users leave you will get a member_removed event and you can remove a marker.

An example of the client code might be:

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);
};