import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { HMGUtils } from 'src/app/hmg-common/hmg_utils'; import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { OfferDiscountService } from '../services/service'; declare var google; @Component({ selector: 'app-location', templateUrl: './location.component.html', styleUrls: ['./location.component.scss'], }) export class LocationComponent implements OnInit { @ViewChild('map') mapContainer: ElementRef; locations: any = []; map: any; offerDetails: any; constructor(public hmgUtils: HMGUtils, public route: ActivatedRoute, public cs: CommonService) { this.route .params.subscribe(val => { setTimeout(() => { this.ionEnter(); }, 100); }); } ionEnter() { this.locations = this.cs.sharedService.getSharedData(OfferDiscountService.selected_offers, false); this.offerDetails = this.cs.sharedService.getSharedData(OfferDiscountService.selected_offers, false); this.displayMap(); } ngOnInit() { } displayMap() { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 10, center: { lat: 24.7136, lng: 46.6753 }, } ); this.setMarkers(map); } setMarkers(map) { for (let i = 0; i < this.locations.length; i++) { const loc = this.locations[i]; const infoWindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: { lat: loc.latitude, lng: loc.longitude }, map, // icon: image, // shape: shape, title: this.offerDetails.Title, }); marker.addListener("click", () => { this.cs.openLocation(loc.latitude, loc.longitude) }); } this.hmgUtils.getCurrentLocation((resp) => { console.log(resp); if (resp) { const latLng = new google.maps.LatLng(resp.latitude, resp.longitude); const mapOptions = { center: latLng, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, myLocation: true }; this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions); }; }) } }