CodePen

HTML

            
              <!-- 

Note that this example has been updated for v1.0.0 of conditioner.js

The element:{seen} test has been replaced with element:{was visible}.

-->
<h1>Binding and Loading a Map Module</h1>

<p>Scroll down to the Map, it's only a couple of pixels away.</p>

<a href="http://maps.google.com/?ll=51.741,3.822"
   data-module="ui/Map"
   data-conditions="media:{(min-width:30em)} and element:{was visible}">A Beach on Google Maps</a>

<p>It will only be visible if the current view is wider than 30em's, which is approximately 480 pixels.</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html,body {
  margin:0;
  padding:0;
}

html {
  text-align:center;
  color:#222;
  background:#dedede;
}

body {
  padding:4em 1em 2.5em;
  font-family:'American Typewriter', 'Courier New', Courier, Monaco, mono; 
  background:#f2f2f2;
  box-shadow:inset 0 0 5em #ccc;
}

h1 {
  font-size:1.25em;
  margin-right:1em;
  margin-left:1em;
}

h1+p {  
  margin-bottom:30em;
}

a[data-initialized]+p {
  display:none;
}

a {
  display:block;
}

img {
  border:2px solid #fff;
  max-width:100%;
  box-shadow:0 .125em .25em #aaa;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // define google maps module
define('ui/Map',function(){

    'use strict';

    // Map Class
    var exports = function(element,options) {

        // set element reference
        this._element = element;
      
        // remember options
        this._options = options;

        // backup content
        this._inner = this._element.innerHTML;

        // remember if loading
        this._loading = false;

        // load map
        this._load(this._element.getAttribute('href'));
    };

    // default options
    exports.options = {
        zoom:10
    };
  
    // get position success
    exports.prototype._load = function(url) {

        // url is a required param but will fail silently if not supplied
        if (!url) {return;}

        // now loading map
        this._loading = true;

        // set to loading
        this._element.innerHTML = 'Loading map';

        // setup lat lng
        var qs = url.match(/[\d]*\.?[\d]+/g),
            
        // setup position object
        position = {
            coords:{
                latitude:parseFloat(qs[0]),
                longitude:parseFloat(qs[1])
            },
            zoom:parseInt(qs[2],10) || this._options.zoom
        };

        // clear
        var self = this,
        style = '&style=feature:water|hue:0x00a1ff|saturation:-24&style=feature:road|element:labels|visibility:off&style=feature:administrative|element:labels|visibility:off&style=feature:landscape.natural|element:geometry.fill|saturation:-44|lightness:37|hue:0xf6ff00&style=feature:administrative.province|visibility:off&style=feature:poi|visibility:off&style=feature:transit|visibility:off&style=feature:water|element:labels|visibility:off',
        map = document.createElement('img');
        map.setAttribute('alt','');
        map.className = 'map';
        map.onload = function() {

            // if not loading don't append
            if (!self._loading) {
                return;
            }

            // append map image
            self._element.innerHTML = '';
            self._element.appendChild(map);
        };
        map.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' + position.coords.latitude + ',' + position.coords.longitude + '&zoom=' + position.zoom + '&size=' + 500 + 'x' + 150 + '&maptype=roadmap&sensor=false' + style + '&key=AIzaSyCcvAEOb99l4In3NkK8KyFimgF7i0LQFCA';
      
        // key will only be valid from my codepen account, so please remove or replace when forking.

    };

    // Unload Map module
    exports.prototype.unload = function() {

        // not loading anymore
        this._loading = false;

        // restore content
        this._element.innerHTML = this._inner;

    };

    return exports;

});

// load conditioner
require(['conditioner'],function(conditioner) {
  
  conditioner.init();
  
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................