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 map;

function createGoogleMap(containerId) {

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

    map = new google.maps.Map(document.getElementById(containerId), options);
}

function move(latitude, longitude) {
    var pos = new google.maps.LatLng(latitude, longitude);
    map.setCenter(pos);
}


// imageCarousel.js
    
var images = [];

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

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

function move(imageToRemove, imageToAdd) {
    alert("Removing image '" + imageToRemove + "' and adding image '" + imageToAdd + "'");
}

// On-load scripts

function setUpMap() {
    createGoogleMap("map");
    move(43.650236593550304, -79.35956954956055);
}

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

    startCarousel();
}

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

init();