import { Component } from '@angular/core' ; import { ViewChild } from '@angular/core' ; import { } from '@types/googlemaps' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { @ ViewChild ( 'gmap' ) gmapElement : any ; map : google . maps . Map ; latitude : any ; longitude : any ; iconBase = 'https://maps.google.com/mapfiles/kml/shapes/' ; markerTypes = [ { text : "Parking" , value : "parking_lot_maps.png" } ] ; selectedMarkerType : string = "parking_lot_maps.png" ; isHidden = false ; ngOnInit ( ) { } ngAfterContentInit ( ) { let mapProp = { center : new google . maps . LatLng ( 18.5793 , 73.8143 ) , zoom : 15 , mapTypeId : google . maps . MapTypeId . ROADMAP } ; this . map = new google . maps . Map ( this . gmapElement . nativeElement , mapProp ) ; } setMapType ( mapTypeId ) { this . map . setMapTypeId ( mapTypeId ) ; } setCenter ( ) { this . map . setCenter ( new google . maps . LatLng ( this . latitude , this . longitude ) ) ; let location = new google . maps . LatLng ( this . latitude , this . longitude ) ; let marker = new google . maps . Marker ( { position : location , map : this . map , title : 'Got you!' } ) ; marker . addListener ( 'click' , this . simpleMarkerHandler ) ; marker . addListener ( 'click' , ( ) => { this . markerHandler ( marker ) ; } ) ; } simpleMarkerHandler ( ) { alert ( 'Simple Component\'s function...' ) ; } markerHandler ( marker ) { alert ( 'Marker\'s Title: ' + marker . getTitle ( ) ) ; } showCustomMarker ( ) { this . map . setCenter ( new google . maps . LatLng ( this . latitude , this . longitude ) ) ; let location = new google . maps . LatLng ( this . latitude , this . longitude ) ; console . log ( `selected marker: ${ this . selectedMarkerType }` ) ; let marker = new google . maps . Marker ( { position : location , map : this . map , icon : this . iconBase + this . selectedMarkerType , title : 'Got you!' } ) ; } toggleMap ( ) { this . isHidden = ! this . isHidden ; this . gmapElement . nativeElement . hidden = this . isHidden ; } }