JSFiddle - React, Tailwind, and code Playground

by designworksinteractive

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2VZvngp-Tff39y4oBI3Ox7jytqDEQoNs&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="directionsPanel"></div>
<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
}
#directionsPanel {
  width: 200px;
  float: left;
}

JavaScript

var rendererOptions = {
  draggable: true,
  suppressInfoWindows: true
  };
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;
var total;
var waypoint_markers = []

var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -3.32910),
    mapTypeId: 'terrain'
};
var markers = [];

$(function() {
  map = new google.maps.Map($('#map')[0], myOptions);

  directionsDisplay.setMap(map);
  //directionsDisplay.setPanel($("#directionsPanel")[0]);

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    watch_waypoints();
  });
  calcRoute(false);
});

function calcRoute(waypoints) {
  var selectedMode = "BICYCLING"; //document.getElementById("mode").value;
  var ary;
  if(waypoints) {
    ary = waypoints.map(function(wpt) {return {location: wpt, stopover: false};});
  } else {
    ary = [];
  }

  var request = {
    origin: "Seattle, WA",
    destination: "Portland, OR",
    waypoints: ary,
    travelMode: google.maps.TravelMode[selectedMode],
    unitSystem: google.maps.UnitSystem["IMPERIAL"]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function watch_waypoints() {
  clear_markers();
  var wpts = directionsDisplay.directions.routes[0].legs[0].via_waypoints;
  for(var i=0; i<wpts.length; i++) {
    var marker = new google.maps.Marker({
        map: map,
        //icon: "/images/blue_dot.png",
        position: new google.maps.LatLng(wpts[i].lat(), wpts[i].lng()),
        title: i.toString()
        });
    waypoint_markers.push(marker);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent("double click to delete this waypoint");
        infowindow.open(map, this);
    });
   ...