MarkerCluster

by pixelmedia

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places">
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.js">
    </script>
    <script src="https://raw.githubusercontent.com/jiren/filter.js/master/src/filter.js" type="text/javascript">
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default">
    </script>
      <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
    <title></title>
</head>
<body>
    <div class="container">
        <div id="places"></div><!-- CLOSE 6 COL -->
        <input class="controls" id="pac-input" placeholder="Search Box" type="text">
        <div class="map" id="map"></div><!-- CLOSE CONTAINER -->
    </div>
</body>
</html>

CSS

body {
    /* background-color: #f5f5f5; */
    font-family: "Open Sans", sans-serif;
}
h4, dd, .checkbox label {
    font-weight: 200;
}
dt {
    font-weight: 400;
}
select, textarea, input {
    border-radius: 0 !important;
    font-weight: 200;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none !important;
}
select:focus, textarea:focus, input:focus {
    border-color: #CCC !important;
}
.container {
    margin: 0 auto;
}
.sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    min-height: 600px;
    /* background-color: #f5f5f5; */
}
.sidebar.col-md-3 {
    padding: 0px;
}
.sidebar .well {
    border-radius: 0px;
    /* background-color: #EEE; */
    background-color: #FFF;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.sidebar h4 {
    padding-left: 0px;
}
.sidebar .row {
    border-bottom: 2px solid #20B2AA;
    margin-bottom: 10px;
}
.sidebar .progress {
    margin-bottom: 0px;
    margin-top: 12px;
    float: right;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}
.sidebar .progress-bar {
    background-color: #F08080;
    border-radius: 0;
}
.sidebar legend {
    font-size: 18px;
    font-weight: 300
}
.criteria {
    background-color: #D3D3D3;
    min-height: 110px;
    margin: 20px 0px;
    padding-bottom: 5px;
}
.title {
    padding: 5px 0;
    color: #222;
    font-size: 25px;
    font-weight: 600;
    width: 140px;
}
.content {
    margin-top: 15px;
}
.thumbnail {
    /* background-color: #EEE; */
    min-height: 265px;
    border-radius: 0;
    min-height: 300px;
}
.label {
    border-radius: 0;
}
.caption .detail {
    margin-top: 15px;
}
.caption .field {
    font-weight: bold;
    float: left;
    width: 65px;
}
.caption h4 {
    color: #b22222;
    min-height: 45px;
}
.field-row {
    display: block;
}
.first {
    margin-top: 10px;
}
.collection {
    margin-right: 1px;
}
.outline {
    display: block;
    position: absolute;
    left: 15px;
    height: auto;
   ...

JavaScript

$(document).ready(function() {
    var places = [{
        "id": 1,
        "name": "Test",
        "coordinate": {
            "latitude": -37.8136,
            "longitude": 144.9630
        },
        "description": "This is a test",
        "is_active": true
    },
    {
        "id": 2,
        "name": "Test2",
        "coordinate": {
            "latitude": -37.8136,
            "longitude": 144.9430
        },
        "description": "This is a test",
        "is_active": true
    },
    {
        "id": 3,
        "name": "Test3",
        "coordinate": {
            "latitude": -37.8136,
            "longitude": 144.9530
        },
        "description": "This is a test",
        "is_active": true
    },
    {
        "id": 4,
        "name": "Test4",
        "coordinate": {
            "latitude": -37.8136,
            "longitude": 144.9670
        },
        "description": "This is a test",
        "is_active": true
    }]
    // EXECUTE FUNCTIONS:
    var place = places[0];
    GoogleMap.init(place.coordinate.latitude, place.coordinate.longitude, places);
    var afterFilter = function(result) {
        $('#total_places').text(result.length);
        GoogleMap.updateMarkers(result);
    }
    // ON PAGE DISPLAY STRUCTURE
});
// BUILD FILTERS:
// BUILD GOOGLE MAPS:
var GoogleMap = {
    map: null,
    markers: {},
    init: function(lat, lng, places) {
        var self = this;
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(lat, lng)
        };
        this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
        this.infowindow = new google.maps.InfoWindow({
            size: new google.maps.Size(50, 50)
        });
        var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
        google.maps.event.addListener(searchBox, 'places_changed', function() {
            searchBox.set('map', null);
            var places = searchBox.getPlaces();
            var...