CodePen

HTML

            
              <h1>Loading the Map Module and Passing Options</h1>

<ul>
  <li>
    <h2>Page Options</h2>
    <pre>{"zoom":5}</pre>
    <a href="http://maps.google.com/?ll=51.741,3.822"
   data-module="ui/Map">A Beach on Google Maps</a>
  </li>
  <li>
    <h2>Node Options</h2>
    <pre>{"zoom":"14"}</pre>
    <a href="http://maps.google.com/?ll=51.741,3.822"
   data-module="ui/Map"
   data-options='{"zoom":"14"}'>A Beach on Google Maps</a>
  </li>
</ul>  
            
          
!

↑ Insert the most common viewport meta tag

CSS

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

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

body {
  padding:1em 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;
}

h2 {
  font-size:1em;
}

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

ul,li {
  margin:0;
  padding:0;
}

ul {
  display:table;
  width:100%;
  table-layout:fixed;
}

li {
  display:table-cell;
  width:50%;
}

a {
  display:block;
  padding:.5em;
}

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

pre {
  overflow:hidden;
}

@media (max-width:320px) {
  
  body {
    font-size:.75em;
  }
  
}

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

JS

            
              /*
// setup requirejs
require.config({
  paths:{
   
  }
});
*/

// 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=' + 300 + '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) {
  
  // setting page level options
  conditioner.setOptions({
    modules:{
      'ui/Map':{
        options:{
          zoom:5
        }
      }
    }
  });
  
  // initialise the conditioner
  conditioner.init();
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................