JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
<div onclick="clearMarkers();">Hide</div>
<div onclick="showMarkers();">Show</div>
<div class="hideTop">
    
<h2>Everett</h2>

    <div id="storeAddress" class="storeAddress">
        <p id="addressLine">19 MYSTIC VIEW ROAD, EVERETT, MA 02149</p>
        <p>Tel: (617) 381-0804</p>
        <p>Fax: (617) 381-1758</p>
    </div>
</div>

<div id="map-canvas"></div>
<div id="panel">
    <div class="directionWrap">
        <div id="directions">
            <input type="text" class="inputbox" placeholder="Enter start address" onfocus="if(this.value!==''){this.style.color='#000000'}" onblur="if(this.value!==''){this.style.color='#000'}" id="start_location" autocomplete="off" />
            <div onclick="calcRoute();" class="actionDirection">GO</div>
        </div>
        <div class="locator_combined_directions" id="directions-panel"></div>
    </div>
</div>

CSS

html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
 }
 #panel {
     background-color: #fff;
     padding: 5px;
     border: 1px solid #999;
 }
#map-canvas{width:100%;height:400px;}
.hideTop{display:none}

.item-page.storeLocator .gm-style-iw{width:125px!important}
.item-page.storeLocator .com_locator_title{font:small-caps 14px Georgia;letter-spacing:1px}
.item-page.storeLocator .com_locator_address, .item-page.storeLocator .popupWindow{font:10px Arial;text-transform:capitalize}
.com_locator_title{margin:0}
.popupWindow{font:.8em "Times New Roman",Times,serif;text-transform:capitalize;color:#333}
.popupWindow .com_locator_description{font-size:.9em;margin-top:8px;color:#666;font-weight:bold}
.popupWindow .com_locator_description strong{font-size:1.5em;color:#333}
.popupWindow a{color:#666}
.popupWindow a:hover{color:#c41014}
.popupWindow .com_locator_address > p{margin:0;font:10px Arial}
.com_locator_address{margin:10px 0}

JavaScript

var geocoder;
var map;
var finallatlng;
var finallat;
var finallng;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var markers = [];
var contentString;
//Convert address into geocode coordinates
function initialize() {
    geocoder = new google.maps.Geocoder();

    var address = document.getElementById('addressLine').innerHTML;
    address = address.replace(/<\/?[^>]+(>|$)/g, "");

    geocoder.geocode({
        'address': address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            finallatlng = results[0].geometry.location;
            window.finallat = finallatlng.lat();
            window.finallng = finallatlng.lng();
            latlng = new google.maps.LatLng(finallat, finallng);
            mapOptions = {
                zoom: 17,
                center: latlng
            }

            directionsDisplay = new google.maps.DirectionsRenderer();

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


            var inputStart = (document.getElementById('start_location'));
            var autocompleteStart = new google.maps.places.Autocomplete(inputStart);
            autocompleteStart.bindTo('bounds', map);
            
            var storeTitle = document.getElementsByTagName("h2")[0].innerHTML;
            var storeAddress = document.getElementById('storeAddress').innerHTML;
            //var storeHours = document.getElementById('storeHours').innerHTML;
            contentString = '<div class="popupWindow">';
            contentString += '<h3 class="com_locator_title">BTG in ' + storeTitle + '</h3>';
            contentString += '<div class="com_locator_address">' + storeAddress + '</div>';
            //contentString += '<div class="com_locator_address">'+storeHours+'</div>';
            contentString += '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
  ...