JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 50%; width:80% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4FqzCCdQniryPw60Mb7caCEpkFRXtftg&sensor=true">
    </script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	 <script type="text/template" id="template-infowindow">
        
	 </script>

	<script>
	var jsonResp = {
		"jsdata": [{
			"Address1": null,
			"Address2": "3 SIMMONDS STREET",
			"Address3": "SELBY",
			"Distance": "0.08km",
			"Id": "13442",
			"ItemCount": 1,
			"ItemType": "Restaurant",
			"Latitude": -26.209505,
			"Longitude": 28.039382,
			"Title": "JOHANNESBURG"
		}, {
			"Address1": "22ND FLOOR",
			"Address2": "LIFE CENTRE",
			"Address3": "45 COMMISSIONER STREET",
			"Distance": "0.45km",
			"Id": "9968",
			"ItemCount": 3,
			"ItemType": "Disco",
			"Latitude": -26.205873,
			"Longitude": 28.036609,
			"Title": "Bar and pub"
		}, {
			"Address1": "24 GERALD SEKOTO STREET",
			"Address2": "FERREIRASDORP",
			"Address3": "JOHANNESBURG",
			"Distance": "0.46km",
			"Id": "5200",
			"ItemCount": 1,
			"ItemType": "Computer Shop",
			"Latitude": -26.20844,
			"Longitude": 28.034146,
			"Title": "SKYLINE SUPERMARKET"
		}]
	};

	</script>
    <script type="text/javascript">
	var map;
	var directionsDisplay;
	var directionsService = new google.maps.DirectionsService();
		
	var currentLat = -26.2094845;
	var currentLon = 28.0385692;
	var latLon = new google.maps.LatLng(currentLat, currentLon);
	var branches = [];
	var markers=[];
	var count = 0;
	var initMarker;
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
		var mapOptions = {
          center: latLon,
          zoom: 15,
          mapTypeId:...