JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div>
  <p>
    <label for="start">Start: </label>
    <input type="text" name="start" id="start" placeholder="masukkan alamat" value='Museum Taman Prasasti, South Petojo, Special Capital Region of Jakarta, Indonesia' />

    <label for="end">End: </label>
    <input type="text" name="end" id="end" placeholder="masukkan alamat" value='Mangga Dua Square' />

    <input type="submit" value="Calculate Route" onclick="calcRoute()" />
  </p>
  <p>
    <label for="distance">Jarak: </label>
    <input type="text" name="distance" id="distance" readonly />
  </p>
  <p>
    <label for="time">Estimasi waktu: </label>
    <input type="text" name="time" id="time" readonly />
  </p>
  <p>
    <label for="tarif">Tarif: </label>
    <input type="text" name="tarif" id="tarif" readonly />
  </p>
</div>
<div id="map_canvas"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var startCoord, endCoord;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var city = new google.maps.LatLng(-6.17503, 106.826935);
  var myOptions = {
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: city
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  directionsDisplay.setMap(map);

  var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start'));

  var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end'));

  google.maps.event.addListener(autocomplete1, 'place_changed', function() {
    var place = autocomplete1.getPlace();
    if (!place.geometry) {
      // Inform the user that a place was not found and return.
      return;
    }
    // place coordinate 
    startCoord = place.geometry.location
  });
  google.maps.event.addListener(autocomplete2, 'place_changed', function() {
    var place = autocomplete2.getPlace();
    if (!place.geometry) {
      // Inform the user that a place was not found and return.
      return;
    }
    // place coordinate 
    endCoord = place.geometry.location
  });

}

function calcRoute() {
  var start, end;
  if (!startCoord) {
    start = document.getElementById("start").value;
  } else {
    start = startCoord;
  }
  if (!endCoord) {
    end = document.getElementById("end").value;
  } else {
    end = endCoord;
  }
  var distanceDisplay = document.getElementById("distance");
  var timeDisplay = document.getElementById("time");
  var tarifDisplay = document.getElementById("tarif");


  var request = {
    origin: start,
    destination: end,
    avoidTolls: true,
    provideRouteAlternatives: true,
    region: 'co.id',
    avoidHighways: true,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request,...