CustomOverlay for Google Maps

CustomOverlay is a TypeScript class designed to create and manage custom overlays on Google Maps. This class enables smooth animation of markers along a predefined path, providing features such as pausing, resuming, resetting the animation, and more.

Features

• Custom Overlays: Create and place custom HTML content on a Google Map.
• Smooth Animations: Animate a marker along a predefined path with smooth transitions and rotation.
• Animation Control:
  • Start, pause, resume, and reset the animation.
  • Set the animation speed.
• Event Emitters: Listen for events such as position changes and path completion.
• Map Panning: Smoothly pan the map to follow the marker's movement.
• Angle Management: Set and retrieve the angle of the overlay.
• Position Management: Set and retrieve the current position of the overlay.
• Angle Calculation: Calculate the angle between two geographic points.

How to Use

To use the CustomOverlay class in your project, follow these steps:

1. Install the Google Maps JavaScript API

Include the Google Maps JavaScript API in your HTML:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. Install the CustomOverlay Module

If your project supports modules, import the CustomOverlay class:

npm install google-custom-marker

Then, import it in your TypeScript file:

import { CustomOverlay } from 'google-custom-marker';

3. Usage Example

Define your path with latitude, longitude, and angle (degree):

const path = [
  { lat: 40.748817, lng: -73.985428, degree: 0 },
  { lat: 40.748900, lng: -73.986000, degree: 45 },
  // Add more waypoints as needed
];

const overlayOptions = {
    image: 'path/to/image.png',
    position: { lat: 40.748817, lng: -73.985428 },
    angle: 0,
    speed: 1,
    path: path,
    zIndex: '1',
    height: '50px',
    width: '50px',
    marginTop: '0',
    marginLeft: '0',
};

// Create a new CustomOverlay instance
const customOverlay = new CustomOverlay(overlayOptions);

// Set up the map
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: { lat: 40.748817, lng: -73.985428 },
});

// Add the overlay to the map
customOverlay.setMap(map);

Available Methods

• setAngle(angle: number): Sets the angle of the overlay.
• setPosition(position: google.maps.LatLngLiteral): Updates the overlay's position.
• startAnimation(): Starts the animation along the path.
• pauseAnimation(): Pauses the animation.
• resumeAnimation(): Resumes the animation from the paused state.
• setSpeed(speed: number): Sets the speed of the animation.
• getPosition(): Retrieves the current position of the overlay.
• reset(): Resets the overlay to its initial state.
• smoothPanTo(targetLatLng: google.maps.LatLngLiteral, duration: number): Smoothly pans the map to the target latitude and longitude.
• setSmoothCenter(): Sets the center of the map to the overlay's current position.
• getAngle(p1: { lat: number; lng: number }, p2: { lat: number; lng: number }): number: Calculates the angle between two geographic points.
• on(event: string, listener: (data: any) => void): Registers an event listener for custom events.
• removeListener(event: string, listener: (data: any) => void): Removes an event listener.

Example Event Listeners

You can listen for specific events emitted by the overlay:

customOverlay.on('positionChanged', (data) => {
  console.log('Position changed:', data);
});

customOverlay.on('pathCompleted', () => {
  console.log('Path completed!');
});

Conclusion

The CustomOverlay class provides a powerful way to create and manage custom overlays on Google Maps, complete with animation and event handling capabilities. Whether you’re building a tracking application or just want to enhance your map visualizations, this class offers a flexible and robust solution.