JSFiddle - React, Tailwind, and code Playground

by falldeaf

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Waypoints Map</title>
    <style>
      #map {
        height: 500px;
        width: 500px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjg3ANbowfn6fLY_OwmGn7xznUEaIf2Ug&callback=initMap">
    </script>
  </body>
</html>

JavaScript

const srtString = `1
00:00:00,000 --> 00:00:00,033
<font size="28">FrameCnt: 1, DiffTime: 33ms
2024-01-15 16:31:17.896
[iso: 300] [shutter: 1/100.0] [fnum: 1.7] [ev: 0] [color_md: default] [focal_len: 72.00] [latitude: 39.982135] [longitude: -75.190272] [rel_alt: 87.200 abs_alt: 38.315] [ct: 5341] </font>

2
00:00:00,033 --> 00:00:00,066
<font size="28">FrameCnt: 2, DiffTime: 33ms
2024-01-15 16:31:17.929
[iso: 300] [shutter: 1/100.0] [fnum: 1.7] [ev: 0] [color_md: default] [focal_len: 72.00] [latitude: 39.982135] [longitude: -75.190272] [rel_alt: 87.200 abs_alt: 38.315] [ct: 5341] </font>

3
00:00:00,066 --> 00:00:00,099
<font size="28">FrameCnt: 3, DiffTime: 33ms
2024-01-15 16:31:17.963
[iso: 300] [shutter: 1/100.0] [fnum: 1.7] [ev: 0] [color_md: default] [focal_len: 72.00] [latitude: 39.982135] [longitude: -75.190272] [rel_alt: 87.200 abs_alt: 38.315] [ct: 5341] </font>`;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5
  });

	/*
  let waypoints = [
    // ... your waypoints ...
     { lat: 37.772, lng: -122.214, elevation: 10 },
    { lat: 21.291, lng: -157.821, elevation: 20 },
    { lat: -18.142, lng: 178.431, elevation: 30 },
    { lat: -27.467, lng: 153.027, elevation: 40 },
  ];
  */
  let waypoints = parseSrtToWaypoints(srtString);
  console.log(waypoints);

  let bounds = new google.maps.LatLngBounds();
  waypoints.forEach(point => {
    bounds.extend(new google.maps.LatLng(point.lat, point.lng));
  });

  map.fitBounds(bounds);

  let path = waypoints.map(point => ({ lat: point.lat, lng: point.lng }));

  const flightPath = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);

  const circleIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'white',
    fillOpacity: 0.6,
    scale: 10, // Size of the circle
    strokeColor: 'blue',
    strokeWeight: 1
  };

 ...