JSFiddle - React, Tailwind, and code Playground

by kwilson81

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
}

JavaScript

// googleMapsWrapper.js
var mapManager = (function(){

    var map;

    // Public
    var createGoogleMap = function(containerId) {
        var options = {
            zoom: 15,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = buildMap(containerId, options);
    };

    var move = function(latitude, longitude) {
        var pos = new google.maps.LatLng(latitude, longitude);
        map.setCenter(pos);
    };
    
    // Private
    var buildMap = function(containerId, options) {
        return new google.maps.Map(document.getElementById(containerId), options);
    };
    
    return {
        create: createGoogleMap,
        move: move
    };
    
}());

// imageCarousel.js    
var imageCarousel = (function() {
    var images = [];

    var addImage = function(image) {
        images.push(image);
    };

    var startCarousel = function() {
        move(images[0], images[1]);
    };

    function move(imageToRemove, imageToAdd) {
        alert("Removing image '" + imageToRemove + "' and adding image '" + imageToAdd + "'");
    }
        
    return {
        add: addImage,
        start: startCarousel
    }
}());

// On-load scripts

function setUpMap() {
    mapManager.create("map");
    mapManager.move(43.650236593550304, -79.35956954956055);
}

function setUpCarousel() {
    imageCarousel.add("image1.jpg");
    imageCarousel.add("image2.jpg");
    imageCarousel.add("image3.jpg");

    imageCarousel.start();
}

function init() {
    setUpMap();
    setUpCarousel();
}

init();