GoogleMap API3 Cat Sorting

by freedawirl

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div class="map-canvas-container" id="map">
    <div class="map-canvas">
        <div class="marker" data-type="project" data-date="201401" data-lat="51.555684" data-lng="-0.21396000000004278">
            <div class="marker-info">
                <h3>Project 1</h3>
            </div>
        </div>
        <div class="marker" data-type="project" data-date="201402" data-lat="51.56" data-lng="-0.2321240234375">
            <div class="marker-info">
                <h3>Project 2</h3>
            </div>
        </div>
        <div class="marker" data-type="project" data-date="201403" data-lat="51.57" data-lng="-0.2721240234375">
            <div class="marker-info">
                <h3>Project 3</h3>
            </div>
        </div>

        <div class="marker" data-type="news" data-date="201401" data-lat="51.54" data-lng="-0.3121240234375">
            <div class="marker-info">
                <h3>News 1</h3>
            </div>
        </div>
        <div class="marker" data-type="news" data-date="201402" data-lat="51.50" data-lng="-0.3221240234375">
            <div class="marker-info">
                <h3>News 2</h3>
            </div>
        </div>
        <div class="marker" data-type="news" data-date="201403" data-lat="51.53" data-lng="-0.3321240234375">
            <div class="marker-info">
                <h3>News 3</h3>
            </div>
        </div>
    </div>
</div>
<div class="filters">
  <ul>
      <li>
          <a href="#" data-filterby="type" data-filtervalue="project">Projects</a>
      </li>
      <li>
          <a href="#" data-filterby="type" data-filtervalue="news">News</a>
      </li>
  </ul>
  <ul>
      <li>
          <a href="#" data-filterby="date" data-filtervalue="201401">Jan</a>
      </li>
      <li>
          <a href="#" data-filterby="date"...

CSS

.map-canvas-container {
    overflow: hidden;
    width: 100%;
    height: 500px;
}
.map-canvas-container .map-canvas {
    height: 575px;
}
.map-canvas-container .map-canvas .infoBox {
    background: #ffffff !important;
    font-size: 16px !important;
    padding: 20px !important;
    color: #000000 !important;
    width: 200px !important;
}
.map-canvas-container .map-canvas .infoBox h3 {
    margin-top: 0 !important;
}
.filters {
    width: 150px;
    height: 150px;
    background: white;
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid #999;
    border-radius: 2px;
}

JavaScript

var siteURL = 'x';
if (document.domain == 'localhost') siteURL = "x";

$(document).ready(function () {

    function render_map($el) {

        // Var
        var $markers = $el.find('.marker');

        // Vars
        var args = {
            center: new google.maps.LatLng(0, 0),
            backgroundColor: '#ffffff',
            zoom: 4,
            disableDefaultUI: true,
            zoomControl: false,
            disableDoubleClickZoom: true,
            panControl: false,
            mapTypeControl: false,
            scaleControl: false,
            scrollwheel: false,
            streetViewControl: false,
            draggable: true,
            overviewMapControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,

        };

        // Create map	        	
        var map = new google.maps.Map($el[0], args);
        
        // Add a markers reference
        map.markers = [];

        // Add markers
        $markers.each(function () {
            add_marker($(this), map);
        });

        // Center map
        center_map(map);
        
        return map;

    }
    
    function add_marker($marker, map) {

        // Var
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
        var icon = null;
        
        // Simple icon change to differentiate marker type
        if ($marker.data('type') == 'news') {
            icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
        } else {
            icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
        }
        
        var marker = new google.maps.Marker({
            icon: icon,
            position: latlng,
            map: map,
            // Custom property to hold the filters options, it'a used below to filter the markers
            filter: {
                type: $marker.data('type'),
                date: $marker.data('date')
            }
        });

        // Add to array
       ...