Isotope & google maps

Re https://github.com/desandro/isotope/issues/94

by salt

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<p>
    <button id="toggler">Toggle Map</button>
    <button id="shuffler">Shuffler</button>
</p>

<div id="container">
    <div id="map"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>


<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

CSS

#container > * {
    margin: 5px;
    float: left
}

#map {
  width: 290px;
  height: 290px;
}

.box {
    width: 140px;
    height: 140px;
    background: #159;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function() {

    var latlng = new google.maps.LatLng(58.27308430644667, 12.280212342739105); //Konsthallens default location = latlng
    // Creating an object literal containing the properties we want to pass to the map
    var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        scrollwheel: false,
        streetViewControl: false,
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    // Calling the constructor, thereby initializing the map
    var map = new google.maps.Map(document.getElementById('map'), options);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Ajohan',
        clickable: false,
        icon: 'http://grazdesigns.com/konsthallen/images/minilogo.png'
    });

    var $container = $('#container');

    $container.isotope({
        masonry: {
            columnWidth: 150
        }
    });

    var isToggled = false,
        filterSelector;

    $('#toggler').click(function() {
        isToggled = !isToggled;
        filterSelector = isToggled ? '.box' : '*';
        $container.isotope({
            filter: filterSelector
        });
    });

    $('#shuffler').click(function() {
        $container.isotope('shuffle');
    });

});