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>

CSS

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

JavaScript

var slice = Array.prototype.slice,
    divElements = slice.call(document.querySelectorAll("div")),
    zoomLevels = [2, 3, 5, 8].map(function (v) { return { zoom: v } }),
    zipWith = masala(function(fn, a, b){
        return a.map(function(val, i){ return fn(val, b[i]) });
    });

var gMap = new masala(google.maps.Map, 1, {
    center: new google.maps.LatLng(-34.397, 150.644),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: null
});

var zipWidthGMap = zipWith(gMap);

var maps = zipWidthGMap(zoomLevels, divElements);