JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<!doctype html>
<html lang="">
    <head>

        <style>
            #map {
                position:absolute;
                height: 50%;
                width: 100%;
            }
        </style>

    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


        <input type="text" placeholder="San Fransisco" name="search_location" id="search_location"/><button id="search_location_submit" onclick="searchAddress()">Search</button>
        <div id="map"></div>



        <script>

            function initMap() {
                var location1 = {lat: 33.1404106, lng: -96.8054861}; // sleep dallas
                var location2 = {lat: 32.8919358, lng: -117.2031495}; // san diego sleep therapy
                var location3 = {lat: 33.9466277, lng: -84.3320862}; // sleep better georgia

                // CREATE MAP AND DEFINE ELEMENT TO DISPLAY
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: location1,
                    scrollwheel: false,
                    zoom: 8
                });

                var location1_marker = new google.maps.Marker({ // sleep dallas
                    title:'sleep dallas',
                    position: location1,
                    map: map
                });

                var location2_marker = new google.maps.Marker({ // san diego sleep therapy
                    title:'san diego',
                    position: location2,
                    map: map
                });

                var location3_marker = new google.maps.Marker({ // sleep better georgia
                    title:'sleep better',
                    position: location3,
                    map: map
                });

                var marker_list =...