JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:500px;height:380px;"></div>

JavaScript

var placesJSON = 
  [   
 {
     "location":"Richmond, VA",
      stopover:true
     
 },
  {
      "location":"Washington, DC",
      "stopover":true
      
  },
  {
      "location":"Atlanta",
      "stopover":true
      
  }
  ];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.85, lng: -87.65},
    scrollwheel: false,
    zoom: 7
  });

  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });

  // Set destination, origin and travel mode.
  var request = {
    destination: "Miami, FL",
    origin: "Buffalo, NY",
    travelMode: google.maps.TravelMode.DRIVING,
    waypoints: [
    {
      location:placesJSON[0].location,
      stopover:placesJSON[0].stopover
    },{
      location:placesJSON[2].location,
      stopover:placesJSON[2].stopover
    }],
};

var directionsService = new google.maps.DirectionsService();

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
  }
 });
}
initMap();