GoogleMap API3 Cat Sortingv03

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>
<!-- Stores listin on Map -->
<div class="map-canvas-container" id="map">
    <div class="map-canvas">
        <div class="marker" data-type="project" data-store="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-store="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-store="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-store="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-store="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-store="201403" data-lat="51.53" data-lng="-0.3321240234375">
            <div class="marker-info">
                 <h3>News 3</h3>

            </div>
        </div>
    </div>
</div>

<!-- Menu Options for Map -->
<div class="filters">
    <ul>
        <li> <a href="#" data-filterby="type" data-filtervalue="project">MetroAccess Passes Available</a>

        </li>
        <li> <a href="#" data-filterby="type" data-filtervalue="news">No Metro AccessPasses</a>

        </li>
    </ul>
    <ul>
        <li> <a href="#" data-filterby="store"...

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 {
    min-width: 200px;
    background: white;
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid #999;
    border-radius: 2px;
     padding:10px;
}
.filters ul{
 list-style:none;
 margin:0;
padding:0px;}
.filters ul li{margin:5px 0;}
.filters ul li a{text-decoration:none;}
.clear{clear:both}

JavaScript

var siteURL = 'http://www.capmetro.org/';
if (document.domain == 'localhost') siteURL = "http://www.capmetro.org/";

$(document).ready(function () {

    function render_map($el) {

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

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

        };

        // Create map	        	
        var map = new google.maps.Map($el[0], cmtaStores);

        // 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:...