#CustomOverlay for Google Maps

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

#Features Custom Overlays: Place custom HTML content on a Google Map. Smooth Animations: Animate a marker along a predefined path with smooth transitions and rotation. Control Animation: Start, pause, resume, and reset the animation with ease. Event Emitters: Listen for events such as position changes and path completion. Map Panning: Smoothly pan the map to follow the marker's movement.

#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:

2. Install the CustomOverlay Google-custom-marker If your project supports modules, import the CustomOverlay class:

   npm i google-custom-marker

   import { CustomOverlay } from 'custom-marker';

3. Usage

// 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 CustomOverlayOptions : OverlayOptions = { image: string; position: { lat: number; lng: number; }; angle: number; path: { lat: number; lng: number; degree: number; }[]; isSmoothReCenter: boolean; isSmoothTurn: boolean; speed: number; zIndex?: string; height: string; width: string; marginTop?: string; marginLeft?: string; }

// Create a new CustomOverlay instance const CustomOverlay = new CustomOverlay(options);

// 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 to use

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

// Start the animation overlay.startAnimation();

// Pause the animation overlay.pauseAnimation();

// Resume the animation overlay.resumeAnimation();

// Reset the animation overlay.reset();

// Listen for custom events overlay.on('positionChanged', (data) => { console.log('Position changed:', data); });

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