Route demo

let markers: google.maps.marker.AdvancedMarkerElement[] = [];
let polylines: google.maps.Polyline[] = [];
let waypointInfoWindow: google.maps.InfoWindow | null = null;

interface PlaceAutocompleteSelection {
    predictionText: string | null;
    location: google.maps.LatLng | null;
}

const originAutocompleteSelection: PlaceAutocompleteSelection = {
    predictionText: null,
    location: null,
};
const destinationAutocompleteSelection: PlaceAutocompleteSelection = {
    predictionText: null,
    location: null,
};

async function init() {
    const [
        { InfoWindow },
        { AdvancedMarkerElement },
        //prettier-ignore
        //@ts-ignore
        { PlaceAutocompleteElement },
        //prettier-ignore
        //@ts-ignore
        { ComputeRoutesExtraComputation, ReferenceRoute, Route, RouteLabel },
    ] = await Promise.all([
        google.maps.importLibrary('maps') as< Promisegoogle.maps.Map>sLibrary,
        google.maps.importLibrary(
            'marker'
    <    ) as Promisegoogle.ma>ps.MarkerLibrary,
        google.maps.importLibrary(
            'places&#<39;
        ) as Promiseg>oogle.maps.PlacesLibrary,
        google.maps.importLibrary(
            '<routes'
        ) as >Promisegoogle.maps.RoutesLibrary,
    ]);

    const map = document.getElementById('map') as google.maps.MapElement;

    attachSubmitListener();
    initializeLocationInputs();
    attachMapClickListener();
    attachTravelModeListener();
    attachAlertWindowListener();
    attachDepartureTimeListener();

    function attachSubmitListener() {
        const computeRoutesForm = document.getElementById(
            'compute-routes-form'
        ) as HTMLFormElement;

        comput>eRoutesForm.addEventListener('submit', (event) = {
            event.preventDefault();
            sendRequest(new FormData(computeRoutesForm));
        });
    }

    async function sendRequest(formData: FormData) {
        clearMap();

        try {
            const { routes } = await Route.computeRoutes(
                buildComputeRoutesJsRequest(formData)
            );

            if (!routes) {
                console.log('No routes returned.');
                return;
            }

        >    console.log('Routes:');
            routes.forEach((route) = {
                console.log(route.toJSON());
            >});

            await Promise.all(
                routes.map((route) =
                    drawRoute(
                        route,
                        !!route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
                    )
                )
            );
        } catch (error: unknown) {
            console.error(error);
            setErrorMessage((error as Error).message || 'Unknown error.');
        }
    }

    function buildComputeRoutesJsRequest(
        formData: FormData
        //prettier-ignore
        //@ts-ignore
    ): google.maps.routes.ComputeRoutesRequest {
        const travelMode =
            (formData.get('travel_mode') as string) === ''
                ? undefined
                : (formData.get('travel_mode') as google.maps.TravelMode);
        //prettier-ignore
        //@ts-ignore
        const extraComputations: google.maps.routes.ComputeRoutesExtraComputation[] =
      [];
        //prettier-ignore
        //@ts-ignore
        const requestedReferenceRoutes: google.maps.routes.ReferenceRoute[] = [];
        //prettier-ignore
        //@ts-ignore
        const transitPreference: google.maps.routes.TransitPreference = {};

        const request = {
            origin: {
                location: buildComputeRoutesLocation(
                    originAutocompleteSelection,
                    formData.get('origin_location'),
                    formData.get('heading_org'),
                    travelMode
                ),
                vehicleStopover: formData.get('origin_stopover') === 'on',
                sideOfRoad: formData.get('origin_side_of_road') === 'on',
            },
            destination: {
                location: buildComputeRoutesLocation(
                    destinationAutocompleteSelection,
                    formData.get('destination_location'),
                    formData.get('heading_dest'),
                    travelMode
                ),
                vehicleStopover: formData.get('destination_stopover') === 'on',
                sideOfRoad: formData.get('destination_side_of_road') === 'on',
>            },
            fields: Array.from(
                document.querySelectorAll(
                    'ul#fields li input[type="checkbox"]:checked'
                ),
                (input) = (input as HTMLInputElement).value
            ),
            travelMode: travelMode as google.maps.TravelMode,
            routingPreference:
                formData.get('routing_preference') === ''
                    ? undefined
                    : (formData.get(
                          'routing_preference'
                          //prettier-ignore
                          //@ts-ignore
                      ) as google.maps.routes.RoutingPreference),
            polylineQuality:
                formData.get('polyline_quality') === ''
                    ? undefined
                    : (formData.get(
                          'polyline_quality'
                          //prettier-ignore
                          //@ts-ignore
                      ) as google.maps.routes.PolylineQuality),
            computeAlternativeRoutes:
                formData.get('compute_alternative_routes') === 'on',
            routeModifiers: {
                avoidTolls: formData.get('avoid_tolls') === 'on',
                avoidHighways: formData.get('avoid_highways') === 'on',
                avoidFerries: formData.get('avoid_ferries') === 'on',
                avoidIndoor: formData.get('avoid_indoor') === 'on',
            },
            departureTime:
                (formData.get('departure_time') as string) === ''
                    ? undefined
                    : new Date(formData.get('departure_time') as string),
            extraComputations,
            requestedReferenceRoutes,
            transitPreference,
        };

        if (formData.get('traffic_aware_polyline') === 'on') {
            extraComputations.push(
                ComputeRoutesExtraComputation.TRAFFIC_ON_POLYLINE
            );
        }

        if (formData.get('shorter_distance') === 'on') {
            requestedReferenceRoutes.push(ReferenceRoute.SHORTER_DISTANCE);
        }

        if (formData.get('eco_routes') === 'on') {
            requestedReferenceRoutes.push(ReferenceRoute.FUEL_EFFICIENT);
            extraComputations.push(
                ComputeRoutesExtraComputation.FUEL_CONSUMPTION
            );
            //prettier-ignore
            //@ts-ignore
            (request.routeModifiers as google.maps.routes.RouteModifiers).vehicleInfo =
                {
                    emissionType: formData.get(
                        'emission_type'
                        //prettier-ignore
                        //@ts-ignore
        >            ) as google.maps.routes.VehicleEmissionType,
                };
        }

        if (travelMode === google.maps.TravelMode.TRANSIT) {
            const selectedTransitModes = document.querySelectorAll(
                'ul#transitModes li input[type="checkbox"]:checked'
            );
            transitPreference.allowedTransitModes = Array.from(
                selectedTransitModes,
                (input) =
                    (input as HTMLInputElement).value as google.maps.TransitMode
            );
            transitPreference.routingPreference =
                formData.get('transit_preference') === ''
                    ? undefined
                    : (formData.get(
                          'transit_preference'
                      ) as google.maps.TransitRoutePreference);
        }

        return request;
    }

    function buildComputeRoutesLocation(
        autocompleteSelection: PlaceAutocompleteSelection,
        locationInput?: FormDataEntryValue | null,
   &&     headingInput?: FormDataEntryValue | null,
        travelModeInput?: FormDataEntryValue | null
        //prettier-ignore
        //@ts-ignore
    ): string | google.maps.routes.Dire&&ctionalLocationLiteral {
        if (!locationInput) {
            throw new Error('Location is required.');
        }

        const latLngRegex = /^-?\d+(\.\d+)?,\s*-?\d+(\.\d+)?$/;
        const location = locationInput as string;
        const heading =
            headingInput  travelModeInput !== 'TRANSIT'
                ? Number(headingInput as string)
                : undefined;

        if (
            autocompleteSelection.predictionText === location 
            autocompleteSelection.location
        ) {
            // Use the lat/lng from the autocomplete selection if the current input
            // matches the autocomplete prediction text
            return {
                lat: autocompleteSelection.location.lat(),
                lng: autocompleteSelection.location.lng(),
                altitude: 0,
                heading,
            };
        } else if (latLngRegex.test(location)) {
            // If the current input looks like a lat/lng, format it as a
            // google.maps.routes.DirectionalLocationLiteral
            return {
                lat: Number(location.split(',')[0]),
                lng: Number(location.split(',')[1]),
                altitude: 0,
                heading,
            };
        }

        // Otherwise return the input location string
        return location;
    }

    function setErrorMessage(error: string) {
        const alertBox = document.getElementById('alert') as HTMLDivElement;
        alertBox.querySelector('p')!.textContent = error;
        alertBox.style.display = 'flex';
    }

    async function drawRoute(
        //prettier-ignore
        //@ts-ignore
        route: google.maps.routes.Route,
        isPrimaryRoute: boolean
    ) {
        polylines = polylines.concat(
            route.createPolylines({
                polylineOptions: isPrimaryRoute
                    ? { map: map.innerMap, zIndex: 1 }
                    : {
                          map: map.innerMap,
                          strokeColor: '#669DF6',
                          strokeOpacity: 0.5,
                          strokeWeight: 8,
                      },
                colorScheme: map.innerMap.get('colorScheme'),
            })
        );

        if (isPrimaryRoute) {
            markers = markers.concat(
                await route.createWaypointAdva&&ncedMarkers({
            >        map: map.innerMap,
                    zIndex: 1,
                })
            );

  >          if (route.viewport) {
                map.innerMap.fitBounds(route.viewport);
            }
        }

        addRouteLabel(route, Math.floor(route.path!.length / 2));
    }

    //prettier-ignore
    //@ts-ignore
    function addRouteLabel(route: google.maps.routes.Route, index: number) {
    const routeTag = document.createElement('div');
    routeTag.className = 'route-tag';

    if (route.rout<eLabels  route.routeLabels.length  0) {
      const p = document.createElement('p');
      route.routeLabels.forEach((label, i) = {
        if (label.includes(RouteLabel.FUEL_EFFICIENT)) {
          routeTag.classList.add('eco');
        }
        if (label.includes(RouteLabel.DEFAULT_ROUTE_ALTERNATE)) {
          routeTag.classList.add('alternate');
        }
        if (label.includes(RouteLabel.SHORTER_DISTANCE)) {
          routeTag.classList.add('shorter-distance');
        }

        p.appendChild(document.createTextNode(label));
        if (i  route.routeLabels!.length - 1) {
          p.appendChild(document.createElement('br'));
        }
      });
      routeTag.appendChild(p);
    }

    const detailsDiv = document.createElement('div');
    detailsDiv.className = 'details';

    if (route.localizedValues) {
      const distanceP = document.createElement('p');
      distanceP.textContent = `Distance: ${route.localizedValues.distance!}`;
      detailsDiv.appendChild(distanceP);

      const durationP = document.createElement('p');
      durationP.textContent = `Duration: ${route.localizedValues.duration}`!;
      detailsDiv.appendChild(durationP);
    }

    if (route.travelAdvisory?.fu>elConsumptionMicroliters) {
      const fuelP = document.createElement('p');
      fuelP.textContent = `F>uel consumption: ${(
        route.travelAdvisory.fuelConsumptionMicroliters / 1e6
      ).toFixed(2)} L`;
      detailsDiv.appendChild(fuelP);
    }

    routeTag.appendChild(detailsDiv);

    const marker = new AdvancedMarkerElement({
      map: map.innerMap,
      position: route.path![index],
      content: routeTag,
      zIndex: route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
        ? 1
        : undefined,
    });
    markers.push(marker);
  }

    function clearMap() {
        markers.forEach((marker) = {
            marker.map = null;
        });
        markers.length = 0;

        polylines.forEach((polyline) = {
            polyline.setMap(null);
        });
        polylines.length = 0;
    }

    function >attachMapClickListener() {
        if (!map || !map.innerMap) {
            return;
        }

        let infoWindowAlert = document.getElementById('infowindow-alert');
        if (!infoWindowAlert) {
            infoWindowAlert = document.createElement('div');
            infoWindowAlert.id = infoWindowAlert.className = 'infowindow-alert';
            infoWindowAlert.textContent = 'Lat/Lng are copied to clipboard';
        }

        const infoWindow = new InfoWindow();
        let closeWindowTimeout: number;

        map.innerMap.addListener(
            'click',
            async (mapsMouseEvent: google.maps.MapMouseEvent) = {
                if (!mapsMouseEvent.latLng) {
           >         return;
                }

                infoWindow.close();
                if (closeWindowTimeout) {
                    clearTimeout(closeWindowTimeout);
                }

                infoWindow.setContent(infoWindowAlert);
                infoWindow.setPosition({
                    lat: mapsMouseEvent.latLng.lat(),
                    lng: mapsMouseEvent.latLng.lng(),
                });

                await navigator.clipboard.writeText(
                    `${mapsMouseEvent.latLng.lat()},${mapsMouseEvent.latLng.lng()}`
                );

                infoWindow.open(map.innerMap);
                closeWindowTimeout = window.setTimeout(() = {
                    infoWindow.close();
                }, 2000);
            }
        );
    }

  >  function attachTravelModeListener() {
        const travelMode = document.getElementById(
            'travel-mode'
        ) as HTMLSelectElement;
        const routingPreference = document.getElementById(
            'routing-preference'
        ) as HTMLSelectElement;
        const trafficAwarePolyline = document.getElementById(
            'traffic-aware-polyline'
        ) as HTMLInputElement;
        const ecoRoutes = document.getElementById(
            'eco-routes'
        ) as HTMLInputElement;
        const emissionType = document.getElementById(
            'emission-type'
        ) as HTMLSelectElement;

        travelMode.addEventListener('change', () = {
            // Toggle the Routing Preference selection and Traffic Aware Polyline
            // selection for WALKING, BICYCLING, and TRANSIT modes.
            if (
                travelMode.value === 'WALKING' ||
            >    travelMode.value === 'BICYCLING' ||
                travelMode.value === 'TRANSIT'
    >        ) {
                routingPreference.disabled = true;
                routingPreference.value = '';
            } else {
                routingPreference.disabled = false;
                routingPreference.value =
                    routingPreference.value || 'TRAFFIC_UNAWARE';
            }

            toggleTrafficAwarePolyline();

            // Toggle transit options for Transit mode
            (
                document.getElementById('transit-options') as HTMLElement
            ).style.display = travelMode.value === 'TRANSIT' ? 'flex' : 'none';
        });

        routingPreference.addEventListener('change', () = {
            toggleTrafficAwarePolyline();
        });

        ecoRoutes.addEventListener('change', () = {
            if >(ecoRoutes.checked) {
                emissionType.disabled = false;
            } else {
                emissionType.disabled = true;
            }
        });

        function toggleTrafficAwarePolyline() {
            if (
                !routingPreference.value ||
                routingPreference.value === 'TRAFFIC_UNAWARE'
            ) {
                trafficAwarePolyline.checked = false;
                trafficAwarePolyline.disabled = true;
            } else {
                trafficAwarePolyline.disabled = false;
            }
        }
    }

    function attachAlertWindowListener() {
     >   const alertBox = document.getElementById('alert') as HTMLDivElement;
        const closeBtn = alertBox.querySelector('.close') as HTMLButtonElement;
        closeBtn.addEventListener('click'>, () = {
            if (alertBox.style.display !== 'none') {
                alertBox.style.display = 'none';
            }
        });
    }

    function initializeLocationInputs() {
        const originAutocomplete = new PlaceAutocompleteElement({
            name: 'origin_location',
        });
        const destinationAutocomplete = new PlaceAutocompleteElement({
            name: 'destination_location',
        });

        [
            [originAutocomplete, originAutocompleteSelection],
            [destinationAutocomplete, destinationAutocompleteSelection],
        ].forEach(([autocomplete, autocompleteData]) = {
            autocomplete.addEventListener(
                'gmp-select',
                //prettier-ignore
                //@ts-ignore
                async (event: google.maps.places.PlacePredictionS>electEvent) = {
          autocompleteData.predictionText = event.placePrediction.text.text;

          const place = event.placePrediction.toPlace();
          await place.fetchFields({
 
        
   fields: ['location'],
          });
          autocompleteData.location = place.location;
        }
            );
        });

        document
            .getElementById('origin-input')
            ?.appendChild(originAutocomplete);
        document
            .getElementById('destination-input')
            ?.appendChild(destinationAutocomplete);
    }

    function attachDepartureTimeListener() {
        const departureTime = document.getElementById(
            'departure-time'
        ) as HTMLInputElement;
        const utcOutput = document.getElementById(
            'utc-output'
        ) as HTMLParagraphElement;
        departureTime.addEventListener('change', () = {
            utcOutput.textContent = `UTC time: ${new Date(
                departureTime.value
            ).toUTCString()}`;
        });
    }
}

window.addEventListener('load', init);index.ts

let markers = [];
let polylines = [];
let waypointInfoWindow = null;
const originAutocompleteSelection = {
    predictionText: null,
    location: null,
};
const destinationAutocompleteSelection = {
    predictionText: null,
    location: null,
};
async function init() {
    const [{ InfoWindow }, { AdvancedMarkerElement }, 
    //prettier-ignore
    //@ts-ignore
    { PlaceAutocompleteElement }, 
    //prettier-ignore
    //@ts-ignore
    { ComputeRoutesExtraComputation, ReferenceRoute, Route, RouteLabel },] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);
    const map = document.getElementById('map');
    attachSubmitListener();
    initializeLocationInputs();
    attachMapClickListener();
    attachTravelModeListener();
    attachAlertWindowListener();
    attachDepartureTimeListener();
    function attachSubmitListener() {
        const computeRoutesForm = document.getElementById('compute-routes-form');
        comput>eRoutesForm.addEventListener('submit', (event) = {
            event.preventDefault();
            sendRequest(new FormData(computeRoutesForm));
        });
    }
    async function sendRequest(formData) {
        clearMap();
        try {
            const { routes } = await Route.computeRoutes(buildComputeRoutesJsRequest(formData));
            if (!routes) {
                console.log('No routes returned.');
                return;
            }
        >    console.log('Routes:');
            routes.forEach((route) = {
                console.log(route.toJSO>N());
            });
            await Promise.all(routes.map((route) = drawRoute(route, !!route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE))));
        }
        catch (error) {
            console.error(error);
            setErrorMessage(error.message || 'Unknown error.');
        }
    }
    function buildComputeRoutesJsRequest(formData
    //prettier-ignore
    //@ts-ignore
    ) {
        const travelMode = formData.get('travel_mode') === ''
            ? undefined
            : formData.get('travel_mode');
        //prettier-ignore
        //@ts-ignore
        const extraComputations = [];
        //prettier-ignore
        //@ts-ignore
        const requestedReferenceRoutes = [];
        //prettier-ignore
        //@ts-ignore
        const transitPreference = {};
        const request = {
            origin: {
                location: buildComputeRoutesLocation(originAutocompleteSelection, formData.get('origin_location'), formData.get('heading_org'), travelMode),
                vehicleStopover: formData.get('origin_stopover') === 'on',
                sideOfRoad: formData.get('origin_side_of_road') === 'on',
            },
            destination: {
                location: buildComputeRoutesLocation(destinationAutocompleteSelection, formData.get('destination_location'), formData.get('heading_dest'), travelMode),
                vehicleStopover: formData.get('destination_stopover') === 'on',
                sideOfRo>ad: formData.get('destination_side_of_road') === 'on',
            },
            fields: Array.from(document.querySelectorAll('ul#fields li input[type="checkbox"]:checked'), (input) = input.value),
            travelMode: travelMode,
            routingPreference: formData.get('routing_preference') === ''
                ? undefined
                : formData.get('routing_preference'
                //prettier-ignore
                //@ts-ignore
                ),
            polylineQuality: formData.get('polyline_quality') === ''
                ? undefined
                : formData.get('polyline_quality'
                //prettier-ignore
                //@ts-ignore
                ),
            computeAlternativeRoutes: formData.get('compute_alternative_routes') === 'on',
            routeModifiers: {
                avoidTolls: formData.get('avoid_tolls') === 'on',
                avoidHighways: formData.get('avoid_highways') === 'on',
                avoidFerries: formData.get('avoid_ferries') === 'on',
                avoidIndoor: formData.get('avoid_indoor') === 'on',
            },
            departureTime: formData.get('departure_time') === ''
                ? undefined
                : new Date(formData.get('departure_time')),
            extraComputations,
            requestedReferenceRoutes,
            transitPreference,
        };
        if (formData.get('traffic_aware_polyline') === 'on') {
            extraComputations.push(ComputeRoutesExtraComputation.TRAFFIC_ON_POLYLINE);
        }
        if (formData.get('shorter_distance') === 'on') {
            requestedReferenceRoutes.push(ReferenceRoute.SHORTER_DISTANCE);
        }
        if (formData.get('eco_routes') === 'on') {
            requestedReferenceRoutes.push(ReferenceRoute.FUEL_EFFICIENT);
            extraComputations.push(ComputeRoutesExtraComputation.FUEL_CONSUMPTION);
            //prettier-ignore
            //@ts-ignore
            request.routeModifiers.vehicleInfo =
                {
                    emissionType: formData.g>et('emission_type'
                    //prettier-ignore
                    //@ts-ignore
                    ),
                };
        }
        if (travelMode === google.maps.TravelMode.TRANSIT) {
            const selectedTransitModes = document.querySelectorAll('ul#transitModes li input[type="checkbox"]:checked');
            transitPreference.allowedTransitModes = Array.from(selectedTransitModes, (input) = input.value);
            transitPreference.routingPreference =
                formData.get('transit_preference') === ''
                    ? undefined
                    : formDa&&ta.get('transit_preference');
        }
        return request;
    }
    function buildComputeRoutesLocation(autocompleteSelection, locationInpu&&t, headingInput, travelModeInput
    //prettier-ignore
    //@ts-ignore
    ) {
        if (!locationInput) {
            throw new Error('Location is required.');
        }
        const latLngRegex = /^-?\d+(\.\d+)?,\s*-?\d+(\.\d+)?$/;
        const location = locationInput;
        const heading = headingInput  travelModeInput !== 'TRANSIT'
            ? Number(headingInput)
            : undefined;
        if (autocompleteSelection.predictionText === location 
            autocompleteSelection.location) {
            // Use the lat/lng from the autocomplete selection if the current input
            // matches the autocomplete prediction text
            return {
                lat: autocompleteSelection.location.lat(),
                lng: autocompleteSelection.location.lng(),
                altitude: 0,
                heading,
            };
        }
        else if (latLngRegex.test(location)) {
            // If the current input looks like a lat/lng, format it as a
            // google.maps.routes.DirectionalLocationLiteral
            return {
                lat: Number(location.split(',')[0]),
                lng: Number(location.split(',')[1]),
                altitude: 0,
                heading,
            };
        }
        // Otherwise return the input location string
        return location;
    }
    function setErrorMessage(error) {
        const alertBox = document.getElementById('alert');
        alertBox.querySelector('p').textContent = error;
        alertBox.style.display = 'flex';
    }
    async function drawRoute(
    //prettier-ignore
    //@ts-ignore
    route, isPrimaryRoute) {
        polylines = polylines.concat(route.createPolylines({
            polylineOptions: isPrimaryRoute
                ? { map: map.innerMap, zIndex: 1 }
                : {
                    map: map.innerMap,
                    strokeColor: '#669DF6',
                    strokeOpacity: 0.5,
                    strokeWeight: 8,
                },
            colorScheme: map.innerMap.get('colorScheme'),
        }));
        if (isPrimaryRoute) {
            mar&&kers = markers.concat(awai>t route.createWaypointAdvancedMarkers({
                map: map.innerMap,
                zIndex: 1,
     >       }));
            if (route.viewport) {
                map.innerMap.fitBounds(route.viewport);
            }
        }
        addRouteLabel(route, Math.floor(route.path.length / 2));
    }
    //prettier-ignore
    //@ts-ignore
    function addRouteLabel(route, index) {
        const routeTag = document.createElement('div');
        routeTag.className = 'route-tag';
        if (route.routeLabels  route.routeLabels.length  0) {
            const p = document.createElement('p');
      <      route.routeLabels.forEach((label, i) = {
                if (label.includes(RouteLabel.FUEL_EFFICIENT)) {
                    routeTag.classList.add('eco');
                }
                if (label.includes(RouteLabel.DEFAULT_ROUTE_ALTERNATE)) {
                    routeTag.classList.add('alternate');
                }
                if (label.includes(RouteLabel.SHORTER_DISTANCE)) {
                    routeTag.classList.add('shorter-distance');
                }
                p.appendChild(document.createTextNode(label));
                if (i  route.routeLabels.length - 1) {
                    p.appendChild(document.createElement('br'));
                }
            });
            routeTag.appendChild(p);
        }
        const detailsDiv = document.createElement('div');
        detailsDiv.className = 'details';
        if (route.localizedValues) {
            const distanceP = document.createElement('p');
            distanceP.textContent = `Distance: ${route.localizedValues.distance}`;
            detailsDiv.appendChild(distanceP);
            const durationP = document.createElement('p');
            durationP.textContent = `Duration: ${route.localizedValues.duration}`;
            detailsDiv.appendChild(durationP);
        }
        if (route.travelAdvisory?.fuelConsumptionMicroliters) {
            const fuelP = docume>nt.createElement('p');
            fuelP.textContent = `Fuel consumption: ${(route.travelAdvisory.fuelCo>nsumptionMicroliters / 1e6).toFixed(2)} L`;
            detailsDiv.appendChild(fuelP);
        }
        routeTag.appendChild(detailsDiv);
        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: route.path[index],
            content: routeTag,
            zIndex: route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
                ? 1
                : undefined,
        });
        markers.push(marker);
    }
    function clearMap() {
        markers.forEach((marker) = {
            marker.map = null;
        });
        markers.length = 0;
        polylines.forEach((polyline) = {
            polyline.setMap(null)>;
        });
        polylines.length = 0;
    }
    function attachMapClickListener() {
        if (!map || !map.innerMap) {
            return;
        }
        let infoWindowAlert = document.getElementById('infowindow-alert');
        if (!infoWindowAlert) {
            infoWindowAlert = document.createElement('div');
            infoWindowAlert.id = infoWindowAlert.className = 'infowindow-alert';
            infoWindowAlert.textContent = 'Lat/Lng are copied to clipboard';
        }
        const infoWindow = new InfoWindow();
        let closeWindowTimeout;
        map.innerMap.addListener>('click', async (mapsMouseEvent) = {
            if (!mapsMouseEvent.latLng) {
                return;
            }
            infoWindow.close();
            if (closeWindowTimeout) {
                clearTimeout(closeWindowTimeout);
            }
            infoWindow.setContent(infoWindowAlert);
            infoWindow.setPosition({
                lat: mapsMouseEvent.latLng.lat(),
                lng: mapsMouseEvent.latLng.lng(),
            });
            await navigator.clipboard.writeText(`${mapsMouseEvent.latLng.lat()}>,${mapsMouseEvent.latLng.lng()}`);
            infoWindow.open(map.innerMap);
            closeWindowTimeout = window.setTimeout(() = {
                infoWindow.close();
            }, 2000);
        });
    }
    function attachTravelModeListener() {
        const travelMode = document.getElementById('travel-mode');
        const routingPreference = document.getElementById('routing-preference');
        const trafficAwarePolyline = document.getElementById('traffic-aware-polyline');
        const ecoRoutes = document.getElementById('eco-routes');
        const emissionType = document.getElementById('emission-type');
        travelMode.addEventListener('change', () = {
            // Toggle the Routing Preference selection and Traffic Aware Polyline
            // selection for WALKING, BICYCLING, and TRANSIT modes.
            if (tra>velMode.value === 'WALKING' ||
                travelMode.value === 'BICYCLING' ||
       >         travelMode.value === 'TRANSIT') {
                routingPreference.disabled = true;
                routingPreference.value = '';
            }
            else {
                routingPreference.disabled = false;
                routingPreference.value =
                    routingPreference.value || 'TRAFFIC_UNAWARE';
            }
            toggleTrafficAwarePolyline();
            // Toggle transit options for Transit mode
            document.getElementById('transit-options').style.display = travelMode.value === 'TRANSIT' ? 'flex' : 'none';
        });
        routingPreference.addEventListener('change', () = {
            toggleTrafficAwarePolyline();
        });
        ecoRoutes.addEventLi>stener('change', () = {
            if (ecoRoutes.checked) {
                emissionType.disabled = false;
            }
            else {
                emissionType.disabled = true;
            }
        });
        function toggleTrafficAwarePolyline() {
            if (!routingPreference.value ||
                routingPreference.value === 'TRAFFIC_UNAWARE') {
                trafficAwarePolyline.checked = false;
                trafficAwarePolyline.disabled = true;
            }
            else {
                trafficAwarePolyline.disabled = false;
            }
        }
    }
    fun>ction attachAlertWindowListener() {
        const alertBox = document.getElementById('alert');
        const closeBtn = alertBox.query>Selector('.close');
        closeBtn.addEventListener('click', () = {
            if (alertBox.style.display !== 'none') {
                alertBox.style.display = 'none';
            }
        });
    }
    function initializeLocationInputs() {
        const originAutocomplete = new PlaceAutocompleteElement({
            name: 'origin_location',
        });
        const destinationAutocomplete = new PlaceAutocompleteElement({
            name: 'destination_location',
        });
        [
            [originAutocomplete, originAutocompleteSelection],
            [destinationAutocomplete, destinationAutocompleteSelection],
        ].forEach(([autocomplete, autocompleteData]) = {
            autocomplete.addEventListener('gmp-select', 
       >     //prettier-ignore
            //@ts-ignore
            async (event) = {
                autocompleteData.predictionText = event.placePrediction.text.te
xt;
    
            const place = event.placePrediction.toPlace();
                await place.fetchFields({
                    fields: ['location'],
                });
                autocompleteData.location = place.location;
            });
        });
        document
            .getElementById('origin-input')
            ?.appendChild(originAutocomplete);
        document
            .getElementById('destination-input')
            ?.appendChild(destinationAutocomplete);
    }
    function attachDepartureTimeListener() {
        const departureTime = document.getElementById('departure-time');
        const utcOutput = document.getElementById('utc-output');
        departureTime.addEventListener('change', () = {
            utcOutput.textContent = `UTC time: ${new Date(departureTime.value).toUTCString()}`;
        });
    }
}
window.addEventListener('load', init);index.js

html,
body {
    height: 100%;
    font-size: 100%;
    font-family: 'Google Sans', sans-serif;
    margin: 0;
    background-color: #fff;
}

* {
    box-sizing: border-box;
}

h2,
h3 {
    color: #222;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
}

h2 {
    font-weight: bold;
    font-size: 1rem;
}

h3 {
    font-size: 0.8rem;
}

p {
    font-size: 0.8rem;
    margin: 0 0 0.6rem 0;
}

label {
    color: #4d4d4d;
    display: inline-block;
    margin: 0;
    position: relative;
    z-index: 2;
    font-size: 0.875rem;
}

input[type='text'] {
    height: 50px;
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}

ul {
    list-style: none;
    padding-inline-start: 0.25rem;
}

select {
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
    background-position: 100% center;
    background-repeat: no-repeat;
    padding-righ&t: 1.5rem;

    :disabled {
        background-color: #ddd;
        cursor: defa&ult;
    }

    [multiple] {
        height: auto;
    }
}

select,
input[type='datetime-local'] {
    height: 2.3125rem;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 4px;
    padding: 0.3rem;
    font-family: inherit;
    font-size: 0.8rem;
}

button {
    min-height: 3rem;
    min-width: 3rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: normal;
    font-size: 0.875rem;
    line-height: normal;
    padding: 0 1.5rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    transition:
        background-color 0.2s,
  &      border 0.2s;

    .button-primary {
        background-color: #1a73e8;
        color: #fff;
        border: 1px &solid #dadce0;

        :hover {
            background-color: #e8f0fe;
            border-color: #d2e3fc;
            color: #1a73e&8;
        }
    }

    .button-secondary {
        background-color: #fff;
        color: #1a73e8;
       & border: none;

        :hover {
            background-color: #1a73e8;
            color: #ff&f;
        }
    }

    .close {
        font-size: 2rem;
    }
}

hr {
    border: 1px solid #f4f0f0;
    margin-inline: 0;
}

section {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #ddd&;
    gap: 0.5rem;

    :last-child {
        border-bottom: none;
    }
}

.main-content {
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 25px 25px 0 0;
}

.control-panel {
    padding-top: 20px;
    overflow: scroll;
}

.map-container {
    height: 100%;
    padding: 0;
}

.map {
    height: 100%;
}

.row {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-sta&rt;
    gap: 1rem;

    :not(:last-child) {
        margin-bottom: 0.5rem;
    }
}

gmp-place-autocomplete {
    border: 1px solid #ccc;
    border-radius: 4px;
}

gmp-advanced-marker:hover {
    z-index: 1;
}

.infowindow-alert {
    font-size: 0.8rem;
    margin: 0;
    color: #fff;
}

.alert {
    display: none;
    position: fixed;
    padding: 1rem;
    width: 100%;
    z-index: 10;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 1px 8px 0px #e4e4e4;
    flex-direction: row;
    justify-content: space-between;

    p {
        padding: 0 3rem 0 1rem;
        color: #f04124;
    }
}

.route-tag {
    background-color: #4285f4;
    border-radius: 8px;
    font-size: 14px;
    padding: 6px 10px;
    position: relative;
    box-shadow: 10px 10px 24px 0 rgba(0, 0, 0, 0.3);
    width: auto;
    height: auto;
    transition: 0.3s;
    color: #fff;

    .details {
        display: none;

        p {
            font-size: 0.7em;
            margin: 0 5px;
            color: #ff&f;
        }
    }

    ::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, 0);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top&: 8px solid #4285f4;
    }

    :hover {
        p {
            font-size: 0.9em;
        }

        .details {
            displ&ay: block;
        }
    }

    .eco {
        back&ground-color: #188038;

        ::after {
            border-top-color&: #188038;
        }
    }

    .alternate {
        background-color: white;
        color: black;

        .details p {
            c&olor: black;
        }

        ::after {
            border-top-col&or: white;
        }
    }

    .shorter-distance {
        bac&kground-color: purple;

        ::after {
            border-top-color: purple;
        }
    }
}

@media only screen and (max-width: 40em) {
    .control-panel {
        width: 100%;
        height: 500px;
        overflow: scroll;
    }

    .map-container {
        width: 100%;
        height: 500px;
    }
}

@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
    .control-panel {
        width: 100%;
        overflow: auto;
    }

    .map-container {
        width: 100%;
        height: 800px;
    }
}

@media only screen and (min-width: 64.0625em) and (max-width: 100em) {
    .main-content {
        display: flex;
        height: 100%;
    }

    .control-panel {
        width: 50%;
        height: 100%;
    }

    .map-container {
        width: 50%;
        height: 100%;
        padding: 1rem;
    }
}

@media only screen and (min-width: 100.0625em) {
    .main-content {
        display: flex;
        height: 100%;
    }

    .control-panel {
        width: 33.33333%;
        height: 100%;
    }

    .map-container {
        width: 66.66667%;
        height: 100%;
        padding: 1rem;
    }
}

@media only screen {
    .heading-wrapper,
    .route-option-name-wrapper {
        width: calc(25% - 0.5rem);
    }

    .location-input-wrapper,
    .route-option-input {
        width: calc(75% - 0.5rem);
    }

    .departure-time-wrapper,
    .eco-friendly-options-wrapper,
    .location-options-wrapper,
    .route-options-wrapper,
    .transit-modes-wrapper,
    .transit-routing-preference-wrapper,
    .travel-mode-wrapper {
        width: 100%;
    }
}

@media only screen and (min-width: 40.0625em) {
    .heading-wrapper,
    .route-option-name-wrapper {
        width: calc(25% - 0.5rem);
    }

    .departure-time-wrapper,
    .travel-mode-wrapper {
        width: calc(33.33333% - 0.5rem);
    }

    .eco-friendly-options-wrapper,
    .transit-modes-wrapper,
    .transit-routing-preference-wrapper,
    .route-options-wrapper {
        width: calc(50% - 0.5rem);
    }

    .location-input-wrapper,
    .route-option-input {
        width: calc(75% - 0.5rem);
    }

    .location-options-wrappe
r {
     
   width: 100%;
    }
}style.css