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'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'], encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; sites: Site[] = SITES; @Input() form!: Ffilter; 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" } ] } ], } constructor(private mapService: MapService) { } ngOnInit(): void { this.position = { lat: this.form.lat, lng: this.form.lng }; this.getSites(); } ngAfterViewInit() { console.log(this.map) } 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.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 this.getSites(); console.log(this.form) } }