JSFiddle - React, Tailwind, and code Playground

by Rafael Nepomuceno

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">

</div>

CSS

#map {
    width: 100%;
    height: 500px;
}

JavaScript

function initMap() {

	map = new google.maps.Map(document.getElementById('map'), {
		zoom: 16,
		center: pontoInicial
	});

	new google.maps.Marker({
		position: pontoInicial,
		map: map,
		title: 'Seu estabelecimento!'
	});

	google.maps.event.addListener(map, 'click', function(event) {
		marcarMapaEnderecoCliente(event.latLng);
	});
}

function marcarMapaEnderecoCliente(localizacaoClick) {

	var marcacao = new google.maps.Marker({
		position: localizacaoClick,
		map: map,
		draggable: true
	});

	google.maps.event.addListener(marcacao, 'dragend', function(event) {
		console.log("event dragend: ", event);
		marcarMapaEnderecoCliente(event.latLng);
	});

    // containerMapa = new google.maps.DirectionsRenderer({map: map});

    var enderecoCliente = localizacaoClick.lat()+', '+localizacaoClick.lng();

    calculaExibeRota(enderecoCliente);

}

function calculaExibeRota(enderecoCliente, directionsService) {
	var pontoInicialString = pontoInicial.lat+', '+pontoInicial.lng;


	directionsService = new google.maps.DirectionsService;
	directionsService.route({
		origin: pontoInicialString,
		destination: enderecoCliente,
		travelMode: 'WALKING'
	}, function(response, status) {
		console.log("-------------------");
		console.log("response: ", response);
		console.log("status: ", status);
		console.log("-------------------");
		if (status === 'OK') {
      	// response.routes[0].warnings
      	if(containerMapa === false) {
      		// , suppressMarkers: true	
      		containerMapa = new google.maps.DirectionsRenderer({map: map});
      		console.log("containerMapa: ", containerMapa);
      		// containerMapa.setMap(null);
      	} else {
      		containerMapa.setMap(null);
      		containerMapa = new google.maps.DirectionsRenderer({map: map});
      	}
      	containerMapa.setDirections(response);
      } else {
      	console.log("sem direcao");
      }
  });
}

iniciaMapa();