Reactive google map on zoom chaged not working

packages
1

Hello,

I need to add markers dynamically on map and show only markers within the current map bounds, so I have followed the link here- http://meteorcapture.com/how-to-create-a-reactive-google-map/ and add markers is working well, but when i show the markers only within the bounds on zoom_changed map got fade out.

I have used session variables to store the ‘bottomLeft’ & ‘topRight’ coordinates, when i changed the zoom and set session variables with new bounds map got fade out, instead of displaying new markers within new map bounds after zoom.

Map zoom_changed:

  google.maps.event.addListener(map.instance,'zoom_changed', function(event) {
                        var bottomLeft=[map.instance.getBounds().getSouthWest().lat(),map.instance.getBounds().getSouthWest().lng()];
                        var topRight=[map.instance.getBounds().getNorthEast().lat(),map.instance.getBounds().getNorthEast().lng()];        
           });

Routing:

 @route "map",
    path: "/map"
    layoutTemplate: "mapLayout"
    waitOn: ->
      [
        subs.subscribe 'places',Session.get('bottomLeft'), Session.get ('topRight')
      ]
    data: ->
      Places: Places.find({},{sort: {createdAt: -1}}).fetch()

I have used bounds values on server side to run the query as below:

 Meteor.publish('places', function(bottomLeft,topRight){
    if(!bottomLeft && !topRight)
        return [];
    return Places.find( { coordinates: { $geoWithin: { $box:  [ bottomLeft, topRight ] } } } );
 })

Please advise me, how i can show markers on zoom_changed event within current zoomed bounds.
Thanks in advance.