JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" style="width:800px;height:600px;"></div>

JavaScript

var directionDisplay;
      var directionsService = new google.maps.DirectionsService(),
      map,
      marker=new google.maps.Marker();


      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var cluj = new google.maps.LatLng(46.7833856,23.6165124);
        var mapOptions = {
          zoom:13,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: cluj
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
          google.maps.event.addListener(map,'click',function(e){fx(e.latLng)});
      }

      function fx(latLng) {
        marker.setMap(null);

        var request = {
            origin:latLng,
            destination:latLng,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
        console.log(response)
          if (status == google.maps.DirectionsStatus.OK) {
            var point=response.routes[0].legs[0];
            marker.setOptions({map:map,position:point.start_location});
            map.setCenter(point.start_location);
            alert(response.routes[0].summary+'\n'+point.start_location.toString());

          }
        });
      }