import { 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'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'], encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit { /* @ViewChild(GoogleMap, { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info!: MapInfoWindow; */ @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; @Input() sites: Site[] = SITES; @Input() search: string = ''; mapa?: google.maps.Map; zoom = 17; position!: google.maps.LatLngLiteral markers: any[] = []; info_window_content: Site = { name: "", id: "", address: { latitude: 1234, length: 123 } }; options: google.maps.MapOptions = { zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true, 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() { } ngOnInit(): void { this.position = { lat: 7.376362792514798, lng: -72.65115193327162 }; this.createMarkers(); } createMarkers() { const svgMarker = { path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(15, 30), }; this.sites.forEach((site: Site) => { this.markers.push({ position: { lat: site.address!.latitude, lng: site.address!.length }, label: { color: '', text: site.name, }, title: site.name, info: { ...site }, icon: svgMarker /* icon: { url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/2214px-How_to_use_icon.svg.png" } */ }) }) } openInfoWindow(marker: MapMarker, info_site: any) { this.info_window_content = info_site this.info_window.open(marker); } closeInfoWindow(){ this.info_window.close() } }