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">
        
<h5 class="addressLine">3500 BOUL. ST-JOSEPH EST MONTREAL, QC H1X 1W6</h5>

        
<h5 class="addressLine">1080 AUTOROUTE CHOMEDEY (13) LAVAL, QC H7X 4C9</h5>

        
<h5 class="addressLine">3836 BOUL. TASCHEREAU GREENFIELD PARK, QC J4V 2H9</h5>

        
<h5 class="addressLine">519 BOUL CURE LABELLE FABREVILLE, QC H7P 2P5</h5>

        
<h5 class="addressLine">968 PAPINEAU JOLIETTE, QC J6E 2L7</h5>

        
<h5 class="addressLine">39 RUE EVANGELINE GRANBY, QC J2G 6N4</h5>

        
<h5 class="addressLine">5375 BOUL. DES FORGES TROIS-RIVIERES, QC G8Y 5L5</h5>

        
<h5 class="addressLine">925 BOUL. WILFRID HAMEL VANIER, QC G1M 2R7</h5>

        
<h5 class="addressLine">1425 BOUL. ST-JOSEPH DRUMMONDVILLE, QC J2C 2E5</h5>

        
<h5 class="addressLine">2137 BOUL. LABELLE ST-JEROME, QC J7Y 1T1</h5>

        
<h5 class="addressLine">260 BOUL. ARTHUR-SAUVE ST-EUSTACHE, QC J7P 2A4</h5>

        
<h5 class="addressLine">2324 RUE KING OUEST SHERBROOKE, QC J1J 2E8</h5>

        
<h5 class="addressLine">575 BOUL. BOIS-FRANC SUD VICTORIAVILLE, QC G6P 5X5</h5>

        
<h5 class="addressLine">9000 BOUL. LACROIX ST-GEORGES, QC G5Y 5P4</h5>

        
<h5 class="addressLine">2626 BOUL. CASAVANT OUEST ST-HYACINTHE, QC J2S 7R8</h5>

        
<h5 class="addressLine">111 BOUL. INDUSTRIAL REPENTIGNY, QC J6A 4X7</h5>

        
<h5 class="addressLine">1505 BOUL. TALBOT CHICOUTIMI, QC G7H 4C3</h5>

        
<h5 class="addressLine">900 BOUL. DES SEIGNEURS TERREBONNE, QC J6X 1J4</h5>

        
<h5 class="addressLine">55 BOUL. ST-MARTIN CHOMEDEY, QC H7M 1Y6</h5>

        
<h5 class="addressLine">1050 BOUL. DU SEMINAIRE NORD ST-JEAN, QC J3A 1S7</h5>

        
<h5 class="addressLine">1293 KENNEDY ROAD SCARBOROUGH, ON M1P 2L4</h5>

        
<h5 class="addressLine">519 WEST HUNT CLUB...

CSS

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

JavaScript

var finallatlng, finallat, finallng;
var addresses = [];
var LatLngList = [];
var service;
var markers = [];
var infowindow;
var popupContent = [];
var counter = 0;
var refreshIntervalId;
var storeNumber = 1;

//Create array for each address line
var elems = document.getElementsByTagName('h5'),
    i;
for (i in elems) {
    if ((' ' + elems[i].className + ' ').indexOf(' ' + 'addressLine' + ' ') > -1) {
        var innerCont = elems[i].innerHTML;
        addresses.push(innerCont);
    }
}

function initialize() {
    //start geocoding service
    //var j = counter;
    if (counter >= addresses.length) {
        console.log("Interval cleared");
        clearInterval(refreshIntervalId);
        return;
    }
    var geocoder = new google.maps.Geocoder();
    var PosLoc = new google.maps.LatLng(42.40166869999999, -71.0703198);
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: PosLoc,
        zoom: 5
    });
    service = new google.maps.places.PlacesService(map);

    var address = addresses[counter];

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

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

            //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'],
                //name: ['Blinds To Go']['Le Marche Du Store']
            };


            service.nearbySearch(request, function (resultsNearby, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < resultsNearby.length; i++) {
                        var place =...