Google Maps with filter and Zip code search
Filter by different types, cand have multiple values. Also markers can have multiple values. Fits visible markers map bounds
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
Search markers by USA Zip code: <input type="text" name="zip" id="zip" /> <button id="search-zip">Search</button> <button id="reset-search">Reset</button>
<button id="closest-to-me">Show closest to me</button>
<br /><br />
<div class="map-filters-container">
<div>
<div class="filters types">
<div class="filter-header">Filter by Service</div>
<div>
<input type="checkbox" id="Independant_living" name="type-filter[]" data-filterby="type" data-filtervalue="Independant_living" />
<label for="Independant_living">Independant Living</label>
</div>
<div>
<input type="checkbox" id="assisted_living" name="type-filter[]" data-filterby="type" data-filtervalue="assisted_living" />
<label for="assisted_living">Assisted Living</label>
</div>
<div>
<input type="checkbox" id="memory_care" name="type-filter[]" data-filterby="type" data-filtervalue="memory_care" />
<label for="memory_care">Memory Care</label>
</div>
</div>
<div class="filters dates">
<div class="filter-header">Filter by Lifestyle</div>
<div>
<input type="checkbox" id="date-Resort" name="date-filter" data-filterby="date" data-filtervalue="Resort" />
<label for="date-Resort">Resort</label>
</div>
<div>
<input type="checkbox" id="date-Urban" name="date-filter" data-filterby="date" data-filtervalue="Urban" />
<label for="date-Urban">Urban</label>
</div>
<div>
<input type="checkbox" id="date-Rural" name="date-filter" data-filterby="date"...
CSS
.map-canvas-container {
overflow:hidden;
width:100%;
position:relative;
}
.map-canvas-container .map-canvas {
width:100%;
height:500px;
}
.map-canvas-container .map-canvas .marker-info {
display: none;
}
.infoBox {
background:#fcfcfa!important;
font-family:'New Rail Alphabet Medium', sans-serif!important;
font-size:14px!important;
padding:15px!important;
color:#666!important;
width:370px!important;
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
-webkit-box-shadow:5px 5px 15px rgba(121, 121, 121, .2);
-moz-box-shadow:5px 5px 15px rgba(121, 121, 121, .2);
box-shadow:5px 5px 15px rgba(121, 121, 121, .2)
}
.infoBox:after {
top:100%;
left:50%;
border:solid transparent;
content:' ';
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(252, 252, 250, 0);
border-top-color:#fcfcfa;
border-width:12px;
margin-left:-12px
}
.infoBox img:first-of-type {
display:none!important
}
.infoBox .close {
position:absolute;
top:15px;
cursor:pointer;
right:10px;
font-size:21px
}
.infoBox h3.title {
font-size:18px!important;
color:#333!important;
margin:0!important
}
.infoBox h4.location {
font-family:'New Rail Alphabet Light', sans-serif!important;
font-size:14px!important;
color:#333!important;
margin:0 0 10px!important
}
.infoBox .description {
font-size:12px!important;
color:#777;
line-height:1.45em;
margin-bottom:15px
}
.infoBox .description span {
font-size:10px!important;
color:#333!important;
display:inline-block;
margin-top:5px
}
.infoBox .description p:first-of-type {
margin-top:0
}
.infoBox .description p:last-of-type {
margin-bottom:0
}
.infoBox .image img {
width:100%;
height:auto;
display:block!important
}
.map-canvas-container .zoom-container {
position:absolute;
top:50%;
right:20px;
...
JavaScript
(function($){
/* Config */
var countOfClosestMarkers = 8;
var markerIcon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var zipCodeCountry = 'USA';
var mapsGeocodeURL = 'https://maps.googleapis.com/maps/api/geocode/json?components=country:'+zipCodeCountry+'|postal_code:';
var map = null;
var activeFilters = {};
/**
* Function to init map
*/
function render_map($el){
// Get all markers
var $markers = $el.find('.marker');
// Map options
var mapOptions = {
center: new google.maps.LatLng(34.76940908367004, -92.32638536262891),
backgroundColor: '#666666',
zoom: 8,
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
map = new google.maps.Map($el[0], mapOptions);
// Add a markers reference
map.markers = [];
// Add markers
$markers.each(function () {
add_marker($(this), map);
});
// Center map
center_map();
return map;
}
/**
* Function to add marker
*/
function add_marker($marker, map) {
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
var marker = new google.maps.Marker({
icon: markerIcon,
position: latlng,
map: map,
// Custom property to hold the filters options, it'a used below to filter the markers
filter: {
...