Google Maps Configuration

import { Component, HostBinding, Input, OnInit } from '@angular/core';
import { GoogleMapsModule } from '@angular/google-maps';
import { environment } from '../../../environments/environment';

@Component({
  selector: 'app-base-map',
  templateUrl: './base-map.component.html',
  styleUrls: ['./base-map.component.scss'],
  standalone: true,
  imports: [GoogleMapsModule],
})
export class BaseMapComponent implements OnInit {
  @Input() height: string | number = '400px';
  @Input() width: string | number = '100%';
  
  // Default map center (Santiago de Cuba)
  center = {
    lat: 20.0217,   // Latitude
    lng: -75.8294   // Longitude
  };
  
  zoom = 14;
  
  // Map configuration options
  mapOptions = {
    apiKey: environment.googleMapsApiKey,
    disableDefaultUI: true,      // Hide default controls
    gestureHandling: 'greedy',   // Allow one-finger panning
    clickableIcons: true         // Enable clicking on POIs
  };
  
  ngOnInit() {
    this.loadGoogleMapsScript();
  }
  
  private loadGoogleMapsScript(): void {
    // Dynamic script loading implementation
    // ...
  }
}

private loadGoogleMapsScript(): void {
  // Check if Google Maps is already loaded
  if (typeof google !== 'undefined' && google.maps) {
    this.isGoogleMapsLoaded = true;
    return;
  }

  // Check if script is already in DOM
  const existingScript = document.querySelector('script[src*="maps.googleapis.com"]');
  if (existingScript) {
    existingScript.addEventListener('load', () => {
      this.isGoogleMapsLoaded = true;
    });
    return;
  }

  // Create and load the script
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleMapsApiKey}&libraries=places`;
  script.async = true;
  script.defer = true;

  script.onload = () => {
    this.isGoogleMapsLoaded = true;
    console.log('Google Maps script loaded successfully');
  };

  script.onerror = () => {
    console.error('Failed to load Google Maps script');
  };

  document.head.appendChild(script);
}

{
  "dependencies": {
    "@angular/google-maps": "^18.2.14"
  }
}