JSFiddle - React, Tailwind, and code Playground

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>
<section id="currentIceShop">
    <div id="currentMap">Loading...</div>
    <button id="changeShop">Show</button>
</section>
<section id="searchResults">
     <h2>Search results</h2>

    <div id="searchMap">Loading...</div>
    <button id="hideshop">Hide</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
//...