Isotope & google maps

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

by Reusablecode

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');
  });
  
});