JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="http://jon-carlos.com/scripts/masala.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDe9qYbz9tIit28YB_ArIbgNO2tQ4QwSF4&sensor=false">
    
</script>
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>
<div id="map4"></div>
<div id="map5"></div>

CSS

div {
    width:500px;
    height:300px;
}

JavaScript

var slice = Array.prototype.slice,
    divElements = slice.call(document.querySelectorAll("div")),
    zoomLevels = [5, 9, 11, 13, 16].map(function (v) { return { zoom: v } });

// Stolen from hughfdjackson curry example...
// call masala as a function meaning the first argument is a function
var zipWith = masala(function (fn, a, b) {
    return a.map(function (val, i) { return fn(val, b[i]) });
});

// call masala as a constructor meaning the first argument is a constructor
var gMap = new masala(google.maps.Map, 1, {
    center: new google.maps.LatLng(51.508315, -0.16119),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: null
});

var zipWithGMap = zipWith(gMap);

var maps = zipWithGMap(zoomLevels, divElements);