Google Maps JavaScript v3 MarkerClusterer

by designworksinteractive

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2VZvngp-Tff39y4oBI3Ox7jytqDEQoNs&amp;libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js" type="text/javascript"></script>

<div class="photo-map-overlayclose" id="close-overlay">
    <a href="javascript:void(0)" class="noborder-link" id="close-link">Close</a>
</div>


<div class="photo-map" id="google-maps"></div>
<center class="photo-map-overlay" id="toggle-photolist">
    <div id="view-singlephoto"></div>
    
    <div id="view-multiblephotos">
        <div class="color-miniheadline paddingbottom-5 paddingleft-5" style="text-align: left;">
            The following photos was found in a total of <span id="count-photos">0</span>
        </div>
        
        <div style="text-align: left;">
            <div id="list-photos"></div>
        </div>
    </div>
</center>

CSS

.photo {
    box-shadow : 0 0 10px rgba(0, 0, 0, 0.8);
}

.photo-thumblist {
    display : inline-block;
    margin : -1px 2px;
    padding : 0;
    position : relative;
}

.photo-longlist {
    background-color : #f1f1f1;
    border-top : 1px solid #d1d1d1;
    border-bottom : 1px solid #d1d1d1;
    height : 75px;
    overflow : auto;
    padding : 7px 7px;
}

.photo-preview {
    background-color : #222222;
    height : 150px;
    width : 100%;
}

.photo-googlemaps {
    background-color : #222222;
    border : 1px solid #222222;
    height : 300px;
    width : 100%;
}

.photo-map {
    background-color : #222222;
    height : 500px;
    width : 100%;
}

.photo-map-overlay {
    background-color : rgba(255, 255, 255, 0.8);
    display : none;
    margin : -501px 0 0 1px;
    height : 420px;
    overflow : auto;
    padding : 40px 50px;
    position : absolute;
    width : 100%;
}

.photo-map-overlayclose {
    display : none;
    margin : 0 0 0 10px;
    position : absolute;
    z-index : 100;
}

JavaScript

var marker;
var gm_map;
var markerArray = [];
var address = 'Sweden';
var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': address }, function(results, status) {
    if(status == google.maps.GeocoderStatus.OK) {
        gm_map.setCenter(results[0].geometry.location);
        gm_map.fitBounds(results[0].geometry.bounds);
    } else {
        alert("Unable to complete the geological setting due to the following error:\n\n" + status);
    }
});



function initialize() {
    var marker, i;
    var clusterMarkers = [
        new google.maps.Marker({
            position: new google.maps.LatLng(59.381059,13.504026),
            map: gm_map,
            title:"P1220214 1.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.338683,13.492057),
            map: gm_map,
            title:"P1220214 2.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.340715,13.49631),
            map: gm_map,
            title:"P1220214 3.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.327232,13.487384),
            map: gm_map,
            title:"P1220214 4.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.379034,13.516566),
            map: gm_map,
            title:"P1220214 5.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.328631,13.485688),
            map: gm_map,
            title:"P1220214 6.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.328657,13.485591),
            map: gm_map,
            title:"P1220214 7.JPG"
        }),
        
        new google.maps.Marker({
            position: new google.maps.LatLng(59.328501,13.485782),
            map: gm_map,
            title:"P1220214 8.JPG"
        })
        ]
    
   ...