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>
<body>
     <h2>Everett</h2>

    <div id="storeAddress" class="storeAddress">
        <p class="addressLine">143 U.S. 1, Metuchen, NJ 08840</p>
        <p class="addressLine">19 MYSTIC VIEW ROAD, EVERETT, MA 02149</p>
        <p>Tel: (617) 381-0804</p>
        <p>Fax: (617) 381-1758</p>
    </div>
    <div id="map-canvas"></div>
</body>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px
}
#map-canvas {
    width:400px;
    height:400px;
}
.storeAddress, h2 {
    display:none
}
.basicInfo {
    width:180px
}
.basicInfo p.streetView {
    height:75px;
    overflow:hidden
}
.basicInfo p.streetView > img {
    width:100%;
    margin-top:-35px
}

JavaScript

var map, ref, geocoder, marker, finallatlng, finallat, finallng, storeLoc, directionsDisplay, contentString, finalStoreLocation, storeName, storeAddress, storePhotos, storeRating, storeReviews, storeWebsite, storePhone, popupContent, placeLoc, service, storePlaceLng, storePlaceLat, storeOpenHours, bounds,j;
var addresses = [];
var LatLngList = [];
var infowindow = [];
var 



//Create array for each address line
var elems = document.getElementsByTagName('p'),
    i;
for (i in elems) {
    if ((' ' + elems[i].className + ' ').indexOf(' ' + 'addressLine' + ' ') > -1) {
        var innerCont = elems[i].innerHTML;
        //innerCont = innerCont.replace(/<\/?[^>]+(>|$)/g, "");
        addresses.push(innerCont);
    }
}
//alert(addresses.join('\n'));

//Nearby search based on longitude and latitude
function initialize() {
    //start geocoding service
    geocoder = new google.maps.Geocoder();

    //fetch address from html
    //var address = document.getElementById('addressLine').innerHTML;
    //strip address from html tags
    //address = address.replace(/<\/?[^>]+(>|$)/g, "");
    for (j = 0; j < addresses.length; j++) {
        var address = addresses[j];

        //convert address into long-lat
        geocoder.geocode({
            'address': address
        }, function (results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                finallatlng = results[0].geometry.location;
                finallat = finallatlng.lat();
                finallng = finallatlng.lng();

                //create map with the long-lat
                //storeLoc = new google.maps.LatLng(finallat, finallng);
                //attach map to html and center/zoom map


                //search nearby LongLat for BTG store within 200m (this seems enough since the address snaps very close to the store)
                var request = {
                    location: finallatlng,
                    radius: 200,
                    keyword: ['Blinds To Go'],
  ...