JSFiddle - React, Tailwind, and code Playground

by Yamini Sontakke

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;ext=.js"></script>
<body>
    <div id="map-canvas" style="height:100%; width: 100%;"></div>
</body>

CSS

body, html, #map-canvas {
    height: 100%;
    width: 100%;
}

JavaScript

var marker, marker1;
	var map;
	var setval;
	var rendererOptions1 = {
        	    draggable: true,

	    suppressInfoWindows: true,
	    suppressMarkers: true,
	    preserveViewport: true
	};

	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions1);
	var directionsService = new google.maps.DirectionsService();
	var myLatLng = new google.maps.LatLng(22.301803,70.799217);
	var myLatLng1 = new google.maps.LatLng(22.573438,71.200905);

	var contentString = 'Drag me to get route';

	var infowindow = new google.maps.InfoWindow({
	    content: contentString
	});

	var contentString1 = 'Some Destination';

	var infowindow2 = new google.maps.InfoWindow({
	    content: contentString1
	});

	function initialize() {
	    //Set LatLong

	    var mapOptions = {
	        zoom: 6,
	        center: myLatLng
	    };
	    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	    directionsDisplay.setMap(map);


	    marker = new google.maps.Marker({
	        position: myLatLng,
	        map: map
	    });
	    marker1 = new google.maps.Marker({
	        position: myLatLng1,
	        map: map,
	        draggable: true
	    });
	    google.maps.event.addListener(marker1, 'dragend', function(){
		calcRoute();
		});
		
		/*google.maps.event.addListener(marker1, 'click', function() {
			infowindow.open(map,marker1);
		});
		
		google.maps.event.addListener(marker, 'click', function() {
			infowindow2.open(map,marker);
		});*/
		calcRoute();
		
	}
	
	function calcRoute() {
	  var request = {
		  origin:marker1.getPosition(),
		  destination:myLatLng,
		  optimizeWaypoints: true,
		  travelMode: google.maps.TravelMode.DRIVING
	  };
	  directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
		  directionsDisplay.setDirections(response);
		}
	  });
	}


	google.maps.event.addDomListener(window, 'load', initialize);