import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation, } from '@angular/core'; import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'], encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; @Input() form!: Ffilter; loading = true; sites: Site[] = SITES; url = environment.BASE_URL_API; mapa?: any; zoom = 17; position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { name: '', id: 0, address: { latitude: 1234, length: 123, }, }; options: google.maps.MapOptions = { zoomControl: true, scrollwheel: true, disableDoubleClickZoom: false, maxZoom: 17, minZoom: 8, noClear: false, styles: [ { featureType: 'poi', elementType: 'labels.text', stylers: [ { visibility: 'off', }, ], }, { featureType: 'poi.business', stylers: [ { visibility: 'off', }, ], }, { featureType: 'road', elementType: 'labels.icon', stylers: [ { visibility: 'off', }, ], }, { featureType: 'transit', stylers: [ { visibility: 'off', }, ], }, ], }; clickEventSubscription: Subscription; constructor( private mapService: MapService, private sharedService: SharedService ) { this.clickEventSubscription = this.sharedService .getClickEvent() .subscribe(() => { this.mapIsDragged(); }); } ngOnInit(): void { this.position = { lat: this.form.lat, lng: this.form.lng, }; this.getSites(); } ngAfterViewInit() {} getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { console.log('This is data', data); //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { console.log(error); } ); } createMarkers() { const image = { url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), }; this.sites.forEach((site: Site) => { this.markers.push({ position: { lat: site.address!.latitude, lng: site.address!.length, }, title: site.name, info: { ...site, }, icon: image, }); }); } openInfoWindow(marker: MapMarker, info_site: any) { this.info_window_content = info_site; this.info_window.open(marker); } closeInfoWindow() { this.info_window.close(); } mapIsDragged() { this.form.lat = this.map.googleMap?.getCenter().lat() || 0; this.form.lng = this.map.googleMap?.getCenter().lng() || 0; this.form.alt = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); console.log(this.form); } }