Drawing Lines with Distance Labels on Google Maps

Based on your requirements, you'll want to use the Google Maps Drawing Library to allow users to draw shapes on the map and display distance measurements. The approach you're currently using with Three.js is quite different from how Google Maps handles drawing.

Using Google Maps Drawing Library

The Google Maps Drawing Library provides built-in tools for drawing various shapes including polylines, which would be perfect for your use case. Here's how you can implement this in React with TypeScript:

1. Set up the Drawing Manager

TYPESCRIPTCopied
import { useEffect, useRef } from 'react';
import { Loader } from '@googlemaps/js-api-loader';

const MapWithDrawingTools: React.FC = () => {
  const mapRef = useRef<HTMLDivElement>(null);
  const mapInstanceRef = useRef<google.maps.Map | null>(null);
  
  useEffect(() => {
    const loader = new Loader({
      apiKey: 'YOUR_API_KEY',
      libraries: ['drawing']
    });

    loader.load().then(() => {
      if (mapRef.current) {
        // Initialize the map
        const map = new google.maps.Map(mapRef.current, {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
        
        mapInstanceRef.current = map;
        
        // Initialize the drawing manager
        const drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYLINE,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.POLYLINE,
              google.maps.drawing.OverlayType.POLYGON,
            ],
          },
          polylineOptions: {
            strokeColor: '#FF0000',
            strokeWeight: 2,
            editable: true
          }
        });
        
        drawingManager.setMap(map);
        
        // Add event listener for when a polyline is completed
        google.maps.event.addListener(
          drawingManager, 
          'polylinecomplete', 
          (polyline: google.maps.Polyline) => {
            // Calculate and display distance
            displayDistanceOnPolyline(polyline);
          }
        );
      }
    });
  }, []);

  return <div ref={mapRef} style={{ width: '100%', height: '500px' }} />;
};

export default MapWithDrawingTools;

2. Add Distance Calculation and Display

TYPESCRIPTCopied
// Function to calculate distance between two points
const calculateDistance = (
  p1: google.maps.LatLng, 
  p2: google.maps.LatLng
): number => {
  return google.maps.geometry.spherical.computeDistanceBetween(p1, p2);
};

// Function to display distance on polyline
const displayDistanceOnPolyline = (polyline: google.maps.Polyline) => {
  const path = polyline.getPath();
  let totalDistance = 0;
  
  // Create markers for each segment with distance labels
  for (let i = 0; i < path.getLength() - 1; i++) {
    const point1 = path.getAt(i);
    const point2 = path.getAt(i + 1);
    
    // Calculate distance for this segment
    const segmentDistance = calculateDistance(point1, point2);
    totalDistance += segmentDistance;
    
    // Create a marker at the midpoint of the segment
    const midpoint = new google.maps.LatLng(
      (point1.lat() + point2.lat()) / 2,
      (point1.lng() + point2.lng()) / 2
    );
    
    // Format distance for display
    const formattedDistance = segmentDistance > 1000 
      ? `${(segmentDistance / 1000).toFixed(2)} km` 
      : `${segmentDistance.toFixed(0)} m`;
    
    // Create an info window with the distance
    const infoWindow = new google.maps.InfoWindow({
      content: formattedDistance,
      position: midpoint
    });
    
    infoWindow.open(mapInstanceRef.current);
    
    // Update the info window position when the path changes
    google.maps.event.addListener(path, 'set_at', () => {
      const updatedPoint1 = path.getAt(i);
      const updatedPoint2 = path.getAt(i + 1);
      const updatedMidpoint = new google.maps.LatLng(
        (updatedPoint1.lat() + updatedPoint2.lat()) / 2,
        (updatedPoint1.lng() + updatedPoint2.lng()) / 2
      );
      
      const updatedDistance = calculateDistance(updatedPoint1, updatedPoint2);
      const updatedFormattedDistance = updatedDistance > 1000 
        ? `${(updatedDistance / 1000).toFixed(2)} km` 
        : `${updatedDistance.toFixed(0)} m`;
      
      infoWindow.setContent(updatedFormattedDistance);
      infoWindow.setPosition(updatedMidpoint);
    });
  }
};

Important Notes

1. You'll need to include the geometry library in your loader to use the distance calculation functions:

TYPESCRIPTCopied
const loader = new Loader({
  apiKey: 'YOUR_API_KEY',
  libraries: ['drawing', 'geometry']
});

2. This implementation displays distance labels at the midpoint of each line segment. You can adjust the positioning as needed.

3. The labels will update when the user edits the polyline (since we set editable: true).

4. You'll need to handle cleanup of the info windows if the polyline is deleted.

This approach should give you functionality similar to what's shown in your reference GIF, allowing users to draw lines on Google Maps with distance measurements displayed along the paths.