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 id="map_canvas"></div>

CSS

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

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infoWindow = new google.maps.InfoWindow();
  //Create LatLngBounds object.
  var latlngbounds = new google.maps.LatLngBounds();
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  var polyline = new google.maps.Polyline({
    map: map,
    geodesic: true,
    path: [new google.maps.LatLng(markers[0].lat, markers[0].lng), new google.maps.LatLng(markers[1].lat, markers[1].lng)],
    strokeOpacity: 0,
    icons: [{
      icon: {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
      },
      offset: '0',
      repeat: '20px'
    }],
  })
  var startMarker = new google.maps.Marker({
    position: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    map: map
  })
  for (var i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title
    });
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
        infoWindow.open(map, marker);
      });
    })(marker, data);

    //Extend each marker's position in LatLngBounds object.
    latlngbounds.extend(marker.position);

    if (i == 1) {
      request.origin = new google.maps.LatLng(markers[i].lat, markers[i].lng);
    } else if (i == markers.length - 1) {
      request.destination = new google.maps.LatLng(markers[i].lat, markers[i].lng);
    } else if (i != 0) {
      if (!request.waypoints) request.waypoints = [];
      if (request.waypoints.length < 8) {
        request.waypoints.push({
         ...