GoogleMap API3 Cat Sortingv12

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">
        <!-- Heb Locations -->
        <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.25921" data-lng="-97.71153">
            <div class="marker-info ">
                 <h4>HEB</h4>Store #1
                <br/>2701 E 7th St
                <br/>(512) 478-7328</div>
        </div>
        <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.18873" data-lng="-97.76896">
            <div class="marker-info">
                 <h4>HEB</h4>Store #2
                <br/>6607 S IH35
                <br/>(512) 441-9266</div>
        </div>
        <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.29908" data-lng="-97.72015">
            <div class="marker-info ">
                 <h4>HEB</h4>Store #3
                <br/>1000 E. 41st St
                <br/>(512) 441-9266</div>
        </div>
        <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.35231" data-lng="-97.75644">
            <div class="marker-info">
                 <h4>HEB</h4>Store #4
                <br/>7015 Village Center
                <br/>(512) 502-8445</div>
        </div>
        <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.40247" data-lng="-97.72804">
            <div class="marker-info">
                 <h4>HEB</h4>Store #6
                <br/>12407 Mopac
                <br/>(512) 339-1181</div>
        </div>
        <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.44272" data-lng="-97.66439">
            <div class="marker-info">
                 <h4>HEB</h4>Store #7
                <br/>1434 Wells Branch Pkwy
                <br/>(512) 251-2584</div>
        </div>
       ...

CSS

.map-canvas-container {
    overflow: hidden;
    width: 100%;
    height: 600px;
}
.map-canvas-container .map-canvas {
    height: 600px;
}
.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 h4 {
    margin-top: 0 !important;
}
.filters {
    min-width: 200px;
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    bottom: 100px;
    right: 15px;
    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;
    padding: 5px;
    border: 1px solid #ccc;
    display: block;
}
.clear {
    clear:both
}

JavaScript

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

$(document).ready(function () {

    function render_map($el) {

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

        // Vars
        var cmtaStores = {
            center: new google.maps.LatLng(30.4, -97.75),
            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') == 'hasAccess') {
            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'),
               ...