JSFiddle - React, Tailwind, and code Playground

by Eli Marudi

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div align="center" style="height: 30px; width: 530px">
<input id="address" type="textbox">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<fieldset id="form">

    <p>

    <input class="checkbox" id="Dial-a-Ride" name="Dial-a-Ride" type="checkbox" value="Dial-a-Ride" />

    <label for="Dial-a-Ride">Dial-a-Ride</label>

    </p>

    <p>

    <input class="checkbox" id="American Legion" name="American Legion" type="checkbox" value="American Legion" />

    <label for="American Legion">American Legion</label>

    </p>

    <p>

    <input class="checkbox" id="Veterans of Foreign Wars" name="Veterans of Foreign Wars" type="checkbox" value="Veterans of Foreign Wars" />

    <label for="Veterans of Foreign Wars">Veterans of Foreign Wars</label>

    </p>

    

    <p>

    <input class="checkbox" id="Nutrition" name="Nutrition" type="checkbox" value="Nutrition" />

    <label for="Nutrition">Nutrition</label>

    </p>

</fieldset>
  <div id="map" style="width: 500px; height: 400px;"></div>

<script src = "https://maps.google.com/maps/api/js?sensor=false"></script>

JavaScript

var geocoder;
var map;

$(window).load(function(){

   var markers = new Array();

    var iconSrc = {};
    
    iconSrc['Dial-a-Ride'] = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconSrc['American Legion'] = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
    iconSrc['Veterans of Foreign Wars'] = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
    iconSrc['Nutrition'] = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';

    //Further down, in new google.maps.Marker, the icon line becomes:
    // icon: iconSrc[locations[i][2]]
    
    
var locations = [



['Boonton Town', '973-402-9410, ext. 631', 'Dial-a-Ride', 34.169354, -118.60920199999998, 1],

['Boonton Township', '973-331-3336', 'Dial-a-Ride', 40.933,-74.425,2 ],

['Butler Borough', '973-835-8885', 'Dial-a-Ride',40.999497, -74.346326, 3 ],

['Chatham Boro and Chatham Township', '973-635-4565', 'Dial-a-Ride',40.7372, -74.4253,4 ],

['Chester Borough and Chester Township', '908-876-9496', 'Dial-a-Ride',40.785999, -74.692904,5    ],

['Denville Township',     '973-625-7799', 'Dial-a-Ride',40.892222, -74.4775,6],

['Dover', '973-366-2200, ext. 126', 'Dial-a-Ride',40.885899, -74.558241,7 ],

['East Hanover', '973-428-3029', 'Dial-a-Ride',40.82, -74.365,8 ],

['Hanover Township', '973-428-2498', 'Dial-a-Ride',40.816, -74.425,9 ],

['Jefferson Township', '973-208-6123', 'Dial-a-Ride',40.958, -74.591,10 ],

['Kinnelon', '973-835-8885', 'Dial-a-Ride',40.984, -74.386,11 ],

['Lincoln Park', '973-835-8885', 'Dial-a-Ride',40.924, -74.302,12 ],

['Long Hill', '908-626-1101', 'Dial-a-Ride',40.691, -74.475,13    ],

['Madison', '973-593-3094', 'Dial-a-Ride',40.759, -74.417,14 ],

['Mendham Borough and Mendham Township', '973-543-2666', 'Dial-a-Ride',40.779400, -74.598099,15 ],

['Mine Hill', '973-366-2491, ext. 62', 'Dial-a-Ride',40.8768878122, -74.602913445,16 ],

['Montville', '973-331-3336', 'Dial-a-Ride',40.9054189580323, -74.3525718707342,17    ],

['Morris...