implementd maps with category filteration and custom color markers.

vendor/built_in_modules/location/app/assets/javascripts/location.js

@@ -0,0 +1,132 @@
+var Locations = function(ls){
+
+  l = this;
+  this.locations = ls;
+  this.markerCounts = 0;
+  var map = null,
+      infowindow = new google.maps.InfoWindow(),
+      default_location = new google.maps.LatLng( 24.8043107, 121.03042159999995 ),
+      infowindow_template = "<div class='title'></div><div class='image'><img class='thumbnail' src='' /></div>",
+      markers = [];
+
+
+  var initialize = function() {
+
+    google.maps.visualRefresh = true;
+    var location = ( l.locations.length ? new google.maps.LatLng( l.locations[0].latitude, l.locations[0].longitude ) : default_location ),
+        mapOptions = {
+          zoom: 16,
+          center: location,
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+
+    map = new google.maps.Map( document.getElementById('map'), mapOptions );
+
+    for( i = 0; i < l.locations.length; i++ ){
+      markers.push( addMarker( new google.maps.LatLng(l.locations[i].latitude, l.locations[i].longitude), l.locations[i].color, i, function( index ){
+
+      }) );
+    }
+
+  }
+
+  var addMarker = function( location, pinColor, index, markerCallback ){
+
+    var pin = getPin(( pinColor.substr( 0, 1 ) == "#" ? pinColor.replace("#","") : pinColor )),
+        marker = new google.maps.Marker({
+                        map: map,
+                        icon: pin.image,
+                        shadow: pin.shadow,
+                        position: location,
+                        zIndex: 10
+                  });
+
+    google.maps.event.addListener( marker, 'click', function() {
+
+      infowindow.setContent( getTemplate( index ) );
+      infowindow.open( map, marker );
+      if( typeof markerCallback == "function" )
+        markerCallback.call( this, index );
+
+    });
+
+    l.markerCounts++;
+    return {"marker" : marker, "category_id" : l.locations[index].category_id};
+  }
+
+
+
+  var getTemplate = function( obj ){
+
+    var object = ( typeof obj == "number" ? l.locations[obj] : ( typeof obj == "object" ? obj : null ) );
+
+    if ( object ){
+
+      var template = $( "<div></div>" );
+      template.html( infowindow_template );
+      template.find( '.title' ).text( object.name );
+      template.find( "img.thumbnail" ).attr( "src", object.file.thumb.url );
+      return template.html();
+
+    }else{
+
+      throw new InvalidObjectError();
+    }
+
+  }
+
+  var getPin = function( color ){
+
+    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + color,
+        new google.maps.Size(21, 34),
+        new google.maps.Point(0,0),
+        new google.maps.Point(10, 34));
+
+    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
+        new google.maps.Size(40, 37),
+        new google.maps.Point(0, 0),
+        new google.maps.Point(12, 35));
+
+    return {"image":pinImage,"shadow":pinShadow};
+  }
+
+  this.getMarker = function( index ){
+    return markers[index];
+  }
+  this.getAllMarkers = function(  ){
+    return markers;
+  }
+
+  this.clearFilter = function(){
+    var m = l.getAllMarkers();
+    for( i = 0; i < m.length; i++ ){
+      m[i].marker.setVisible(true);
+    }
+  }
+
+  this.filterMarkers = function( categories ){
+    var filtered = [],
+        m = l.getAllMarkers();
+
+    for( i = 0; i < m.length; i++ ){
+      m[i].marker.setVisible(false);
+    }
+    for( i = 0; i < categories.length; i++ ){
+      filtered = filtered.concat(m.filter(function(a){return a.category_id == categories[i]}));
+    }
+    for( i = 0; i < filtered.length; i++ ){
+      filtered[i].marker.setVisible(true);
+    }
+    return filtered;
+  }
+
+google.maps.event.addDomListener(window, 'load', initialize);
+
+}
+var InvalidObjectError = function(){
+  this.name = "InvalidObjectError";
+  this.message = "Object not valid";
+}
+
+InvalidObjectError.prototype = new Error();
+InvalidObjectError.prototype.constructor = InvalidObjectError;

vendor/built_in_modules/location/app/assets/javascripts/panel/gprs/back_end/locations.js

@@ -1,2 +0,0 @@
-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.

vendor/built_in_modules/location/app/controllers/panel/location/back_end/locations_controller.rb

@@ -2,8 +2,13 @@ class Panel::Location::BackEnd::LocationsController < OrbitBackendController
   include AdminHelper
 
   def index
-    @location_infos = LocationInfo.all
+    @locations = LocationInfo.all
     @categories = get_categories_for_index
+    @location_infos = [];
+    @locations.each do |loc|
+      loc['color'] = Category.find(loc.category_id).custom_value
+      @location_infos << loc
+    end
     respond_to do |format|
       format.html # new.html.erb
       format.json { render json: @locations }
@@ -36,6 +41,7 @@ class Panel::Location::BackEnd::LocationsController < OrbitBackendController
 
   def create
     @location_info = LocationInfo.new(params[:location_info])
+    @categories = get_categories_for_index
     if @location_info.save
       flash[:success] = "Success!!"
       redirect_to panel_location_back_end_locations_url

vendor/built_in_modules/location/app/views/panel/location/back_end/locations/index.html.erb

@@ -1,3 +1,5 @@
+<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
+<%= javascript_include_tag "location" %>
 <table class="table main-list">
   <thead>
     <tr>
@@ -28,6 +30,44 @@
     <% end %>
   </tbody>
 </table>
+<div>
+  Categories : 
+</div>
+<div class="btn-group">
+   <% @categories.each do |category| %>
+     <button class="btn cat-filter" data-category='<%= category.id %>'><%= category.title %></button>
+    <% end %>
+</div>
+<a href="javascript:void(0);" id="clear_filter">Clear Filter</a>
+<div id="map" style="width: 100%; height: 500px;"></div>
 <%if is_manager? %>
 <td><%= link_to 'Add', new_panel_location_back_end_location_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn", :ref=>"add-btn"%></td>
 <% end %>
+<script>
+
+  var loc = new Locations(<%= @location_infos.to_json.html_safe %>);
+  jQuery(document).ready(function($) {
+    var filterCategories = [];
+    $("button.cat-filter").bind( clickEvent,function(){
+      var catid =  $( this ).data('category');
+
+      if ( $( this ).hasClass('active') ){
+        $( this ).removeClass('active');
+        var index = filterCategories.indexOf(filterCategories.filter(function(a,i){ return a == catid })[0]);
+        filterCategories.splice( index, 1 );
+      }else{
+        $( this ).addClass('active');
+        filterCategories.push( catid );
+      }
+      loc.filterMarkers(filterCategories);
+    })
+
+    $("a#clear_filter").bind( clickEvent, function(){
+      filterCategories = [];
+      $("button.cat-filter").removeClass('active');
+      loc.clearFilter();
+    })
+
+ });
+
+</script>