Object constructor that uses google maps api to show places/events to go nearby with sliding cards while accounting for insertion on infinite scroll

nearby-map.js

(function($) {
  window.map_storage = [];

  function NearbyMap(mapContainer) {
    
    if (mapContainer.length == 0) {
      return;
    }
    this.whereIam = mapContainer[0];
    var self = this;
    var map;
    var styles = [
      {
        "featureType": "poi",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "color": "#a8d864"
          }, {
            "lightness": 43
          }, {
            "saturation": -4
          }
        ]
      }, {
        "featureType": "transit",
        "elementType": "labels",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "water",
        "stylers": [
          {
            "saturation": 65
          }, {
            "color": "#081ce9"
          }, {
            "lightness": 81
          }
        ]
      }, {
        "featureType": "road.highway",
        "stylers": [
          {
            "hue": "#ffc300"
          }, {
            "gamma": 1.13
          }
        ]
      }, {
        "featureType": "landscape.man_made",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "road",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      }
    ];
    this.map_container = $('.nearby--map', this.whereIam).get(0);
    var lat = this.map_container.getAttribute('data-lat');
    var lng = this.map_container.getAttribute('data-long');
    var latlng = new google.maps.LatLng(lat, lng);
    var mapOptions = {
      zoom: 15,
      center: latlng,
      styles: styles,
      scrollwheel: false,
      draggable: false,
      disableDoubleClickZoom: true,
      disableDefaultUI: true
    };

    map = new google.maps.Map(self.map_container, mapOptions);
    // Add venue marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        'url': '/sites/all/themes/straight2014/assets/img/map_star_small.png',
        'anchor': new google.maps.Point(10, 9)
      }
    });

    if (typeof google === 'object' && typeof google.maps === 'object') {
      google.maps.event.addListenerOnce(map, 'idle', function() {

        var json = JSON.parse($('.map_json', self.whereIam).html());
        bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < json.nearby.length; i++) {
          var lat_event = json.nearby[i].lat,
            lng_event = json.nearby[i].lng,
            id = json.nearby[i].nid,
            latlng_event = new google.maps.LatLng(lat_event, lng_event);
          bounds.extend(latlng_event);
          self.map_createMarkers(latlng_event, bounds, id, map);
          marker.setMap(map);
        }
        map.fitBounds(bounds);
        $.get('/sites/all/modules/custom/gs_venues/templates/map_cards.htm', function(template) {
          $(mapContainer[0]).append(Mustache.render(template, json));
           self.mapActions();
        });
      });
    }



  }

  NearbyMap.prototype.map_createMarkers = function createMarker(latlng_event, bounds, id, map) {
    var marker = new google.maps.Marker({
      map: map,
      position: latlng_event,
      icon: {
        'url': '/sites/all/themes/straight2014/assets/img/map_red_small.png',
        'anchor': new google.maps.Point(7, 7)
      },
      event_id: id
    });

  }

  NearbyMap.prototype.mapActions = function() {
    
    //console.log(this.map_container);
    var self = this;
    var nearby_container = $(self.map_container).closest('.nearby--container');
    
    // event list action
    $('.card', nearby_container).on('click', function(event){
      event.preventDefault();
  
      var event_id = $(this).data('id');
      self.map_open_popup(event_id, nearby_container);
  
      url = window.location.pathname;
      _gaq.push(['_trackEvent', 'Nearby Map', 'Open Card', url, , true]);
    });
    
    // popup action
    $('.popup .close', nearby_container).on('click', function(event){
      event.stopPropagation();
  
      $('.popup.show', nearby_container).removeClass('show');
      $('.popup--controls.show', nearby_container).removeClass('show');
  
      url = window.location.pathname;
      _gaq.push(['_trackEvent', 'Nearby Map', 'Close Card', url, , true]);
    });
    
    // Attach click event to navigation arrows.
    $('.cards--controls [data-arrow]', nearby_container).on('click', function(e){
      var direction = $(this, nearby_container).data('arrow'),
          events_wrapper = $('.cards--wrapper', nearby_container),
          container_width = events_wrapper.width(),
          card_width = $('.card', nearby_container).width(),
          card_spacing = 12, // Manually set to match .nearby--container .cards--table { border-spacing }
          distance = card_width + (card_spacing * 3),
          current_card = events_wrapper.data('card'),
          max_cards = events_wrapper.data('count'),
          cards_to_jump = 2;
  
      switch (direction) {
        case 'prev':
          $('.cards--controls [data-arrow="next"]', nearby_container).removeClass('disabled');
  
          var next_card = current_card - cards_to_jump;
  
          if (next_card <= 0)  {
            $('.cards--controls [data-arrow="prev"]', nearby_container).addClass('disabled');
          }
  
          break;
        case 'next':
          $('.cards--controls [data-arrow="prev"]', nearby_container).removeClass('disabled');
  
          var next_card = current_card + cards_to_jump;
  
          if (next_card >= (max_cards - cards_to_jump)) {
            $('.cards--controls [data-arrow="next"]', nearby_container).addClass('disabled');
          }
        }
  
        events_wrapper.data('card', next_card);
        var scroll_to = next_card * distance;
  
        events_wrapper.animate({scrollLeft: scroll_to}, 150, "linear").data('scroll', scroll_to);
    });
    
    $('.popup--controls [data-arrow]', nearby_container).on('click', function(e){
      var direction = $(this).data('arrow');
      var active = $('.popup.show', nearby_container);
  
      switch (direction) {
        case 'prev':
          var event_id = active.prev('.popup').data('id');
          break;
        case 'next':
          var event_id = active.next('.popup').data('id');
          break;
      }
  
      self.map_open_popup(event_id, nearby_container);
    });
    
    // Testing a general and more reusable event tracking.
    $('a.popup--more', nearby_container).on('click', function(e) {
      _gaq.push(['_trackEvent', 'Nearby Map', 'Click More', $(this).attr('href')]);
    });
  }
  
NearbyMap.prototype.map_open_popup = function open_popup(id, container) {
  var self = this;
  $('.popup.show', container).removeClass('show');
  var active = $('.popup[data-id="' + id + '"]', container);
  active.addClass('show');
  $('.popup--controls', container).addClass('show');  
  self.map_update_controls(active, container);
}

  
NearbyMap.prototype.map_update_controls = function update_controls(active, container) {
  var active_index = active.index() + 1;
  if (active_index == 1) {
    $('.popup--controls [data-arrow="prev"]', container).addClass('disabled');
    $('.popup--controls [data-arrow="next"]', container).removeClass('disabled');
  }
  else if ((active_index) == $('.cards--wrapper').data('count')) {
    $('.popup--controls [data-arrow="prev"]', container).removeClass('disabled');
    $('.popup--controls [data-arrow="next"]', container).addClass('disabled');
  }
  else {
    $('.popup--controls [data-arrow="prev"]', container).removeClass('disabled');
    $('.popup--controls [data-arrow="next"]', container).removeClass('disabled');
  }
}



function loadScript(src, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  if (callback) 
  script.onload = callback;
  document.getElementsByTagName("head")[0].appendChild(script);
  script.src = src;
}

loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyDF8ODmQdP9AKlGj2IQdnM9kBEIOaOZa8A', function() {
  google.maps.event.addDomListener(window, 'load', function() {
    var mapContainer = $('#insertmap');
    var NewMap = new NearbyMap(mapContainer);
    window.map_storage.push(NewMap);
    window.NearbyMap = NearbyMap;
  });
});

})(jQuery);