JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <head>      <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">
var map,
    bounds;

function initialize() {
    var pinkParksStyles = [
    {
        featureType: "all",
        stylers: [
          { saturation: -80 }
        ]
      },{
        featureType: "road.arterial",
        elementType: "geometry",
        stylers: [
          { hue: "#00ffee" },
          { saturation: 50 }
        ]
      },{
        featureType: "poi.business",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
        {name: "Pink Parks"});
    var myOptions = {
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        // List of locations, obviously this would be replaced by your input values
        locations = [document.getElementById('address1').value, document.getElementById('address3').value, document.getElementById('address2').value];
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    bounds = new google.maps.LatLngBounds();
   map.mapTypes.set('pink_parks', pinkMapType);
      map.setMapTypeId('pink_parks');   
    addMarkers(locations);
    
    // Set up geodesic polyline
    var geodesicOptions = {
        strokeColor: '#CC0099',
        strokeOpacity: 0.7,
        strokeWeight: 3,
        geodesic: true
    }
    geodesic = new google.maps.Polyline(geodesicOptions);
    geodesic.setMap(map);
}

// Geodesic origin
function addOrigin(location) {
    var gPath = geodesic.getPath();
    gPath.push(location);
}

// Geodesic destination
function addDestination(location) {
    var gPath = geodesic.getPath();
    gPath.push(location);
}

// addMarkers function, takes an array of plain english addresses, geocodes 
//...