import { Component , OnInit } from '@angular/core' ; import { NavController , ModalController } from 'ionic-angular' ; import { ModalAutocompleteItems } from '../modal-autocomplete-items/modal-autocomplete-items' ; declare var google ; @ Component ( { selector : 'page-page-gmap-autocomplete' , templateUrl : 'page-gmap-autocomplete.html' } ) export class PageGmapAutocomplete implements OnInit { address : any = { place : '' , set : false , } ; placesService : any ; map : any ; markers = [ ] ; placedetails : any ; constructor ( public navCtrl , public modalCtrl ) { } ngOnInit ( ) { this . initMap ( ) ; this . initPlacedetails ( ) ; } showModal ( ) { this . reset ( ) ; let modal = this . modalCtrl . create ( ModalAutocompleteItems ) ; modal . onDidDismiss ( data => { console . log ( 'page > modal dismissed > data > ' , data ) ; if ( data ) { this . address . place = data . description ; this . getPlaceDetail ( data . place_id ) ; } } ) ; modal . present ( ) ; } private reset ( ) { this . initPlacedetails ( ) ; this . address . place = '' ; this . address . set = false ; } private getPlaceDetail ( place_id ) { var self = this ; var request = { placeId : place_id } ; this . placesService = new google . maps . places . PlacesService ( this . map ) ; this . placesService . getDetails ( request , callback ) ; function callback ( place , status ) { if ( status == google . maps . places . PlacesServiceStatus . OK ) { console . log ( 'page > getPlaceDetail > place > ' , place ) ; self . placedetails . address = place . formatted_address ; self . placedetails . lat = place . geometry . location . lat ( ) ; self . placedetails . lng = place . geometry . location . lng ( ) ; for ( var i = 0 ; i < place . address_components . length ; i ++ ) { let addressType = place . address_components [ i ] . types [ 0 ] ; let values = { short_name : place . address_components [ i ] [ 'short_name' ] , long_name : place . address_components [ i ] [ 'long_name' ] } ; if ( self . placedetails . components [ addressType ] ) { self . placedetails . components [ addressType ] . set = true ; self . placedetails . components [ addressType ] . short = place . address_components [ i ] [ 'short_name' ] ; self . placedetails . components [ addressType ] . long = place . address_components [ i ] [ 'long_name' ] ; } } self . map . setCenter ( place . geometry . location ) ; self . createMapMarker ( place ) ; self . address . set = true ; console . log ( 'page > getPlaceDetail > details > ' , self . placedetails ) ; } else { console . log ( 'page > getPlaceDetail > status > ' , status ) ; } } } private initMap ( ) { var point = { lat : - 34.603684 , lng : - 58.381559 } ; let divMap = ( < HTMLInputElement > document . getElementById ( 'map' ) ) ; this . map = new google . maps . Map ( divMap , { center : point , zoom : 15 , disableDefaultUI : true , draggable : false , zoomControl : true } ) ; } private createMapMarker ( place ) { var placeLoc = place . geometry . location ; var marker = new google . maps . Marker ( { map : this . map , position : placeLoc } ) ; this . markers . push ( marker ) ; } private initPlacedetails ( ) { this . placedetails = { address : '' , lat : '' , lng : '' , components : { route : { set : false , short : '' , long : '' } , street_number : { set : false , short : '' , long : '' } , sublocality_level_1 : { set : false , short : '' , long : '' } , locality : { set : false , short : '' , long : '' } , administrative_area_level_2 : { set : false , short : '' , long : '' } , administrative_area_level_1 : { set : false , short : '' , long : '' } , country : { set : false , short : '' , long : '' } , postal_code : { set : false , short : '' , long : '' } , postal_code_suffix : { set : false , short : '' , long : '' } , } } ; } }