JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map {
    width:550px;
    height:400px;
}

JavaScript

$(function(){
 var map    = new google.maps.Map(document.getElementById("map"), {
                  center: new google.maps.LatLng(11.275387916698238, 75.8015380957031),
                  zoom: 12
               }),
     routes = [{origin:'p t usha road, kozhikode', 
               destination:'cooperative hospital, eranjipalam, kozhikode'
               }, 
               {origin:'IIM, Kozhikode',
               destination:'VELLIMADUKUNNU, KOZHIKODE'
               }
              ],
     rendererOptions = {
                preserveViewport: true,
                map:map,
                polylineOptions:{strokeColor:'#FF3300',
                                 strokeWeight: 10},        
                suppressMarkers:true,
                routeIndex:0
              },
     directionsService = new google.maps.DirectionsService();

      $.each(routes,
        function(i,obj){//<--anonymous function
        
        var request = {
                origin: obj.origin,
                destination: obj.destination,
                travelMode: google.maps.TravelMode.DRIVING
              },
            
            directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
            directionsService.route(request, function(result, status) {
    
              if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(result);
              }
            });  
      
        });});