JSFiddle - React, Tailwind, and code Playground

by Osoascam

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<h1>Ice cream shop finder</h1>
<section id="currentIceShop">
    <h2>Current Ice Shop</h2>
    <div id="currentMap">Loading...</div>
     <button id="changeShop"> Search Other Ice Cream Shops </button>
</section>
<section id="searchResults">
    <h2>Search results</h2>
    <div id="searchMap">Loading...</div>
    <button id="selectShop"> Select as the new Ice Cream Shop </button>
</section>

CSS

body {
    background: #321;
}

* {
    font-family: "Segoe UI Light", "Segoe UI", Calibri, "Trebuchet MS", sans-serif;
}

h1 {
    color: #FFD;
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

h2 {
    border-bottom: solid 1px #BBB;
    padding: 0.5em;
    font-size: 1.5em;
}

section {
    border: double 3px #999;
    padding: 0.5em;
    margin: 0.5em;
    background: rgba(215,235,225,0.8);
    border-radius: 4px;
}

#currentMap, #searchMap {
    width: 35em;
    height: 30em;
    box-shadow: 0 0 15px 1px rgba(0,0,0,0.2);
    margin: 0.5em;
}

#selectIceShop, #searchResults {
    display:none;
}

JavaScript

var currentMapId, searchMapId;

// Loads the JSON data from an AJAX call

function getData(settings) {
    var callback = settings.successCallback,
        sentData = settings.json,
        self = this;
    $.ajax({
        url: "/echo/json/",
        data: {
            json: $.toJSON(sentData),
            delay: 2
        },
        type: "POST",
        success: callback
    });
}

// start
// -----------------------------------------------------------------------------------
// Prepares the data and calls the service for loading the first map

function start() {
    var data = {
        json: {
            "latitude": 9.853525 + Math.random(),
            "longitude": -83.909433 + Math.random(),
            "mapId": "currentMap",
            "markers": [{
                "latitude": 9.853525 + Math.random(),
                "longitude": -83.909435 + Math.random(),
                "name": "HELLO, EVERYBODY!!"}]
        },
        successCallback: currentMap
    };
    getData(data);
}

// currentMap
// -----------------------------------------------------------------------------------
// Loads the first map

function currentMap(data) {
    var markers = data.markers;
    initialize(data, currentMapId, markers);
}

// initialize
// -----------------------------------------------------------------------------------
// Given data (lat, long) a map and markers, creates a new map with options: zoom
// level, the coordinates where the map will be centered, and the type of map
// to be displayed

function initialize(data, map, markers) {
    var options = {
        "zoom": 6,
        "center": new google.maps.LatLng(data.latitude, data.longitude),
        "mapTypeId": google.maps.MapTypeId.ROADMAP

    };

    map = new google.maps.Map(document.getElementById(data.mapId), options);

    setMarkers(markers, map);

    // displayDirections(map);
};

// createIceCreamShopMap
// -----------------------------------------------------------------------------------
//...