#4 Ionic4(아이오닉4) GoogleMap 주소검색

Ionic4 구글맵 장소검색 이벤트 (안드로이드)

 

Ionic4 구글맵 장소검색 이벤트 (IOS)

 

#3번까지 왔으면 이미 구글맵은 뷰잉했다는 가정하에 정리를 시작하도록 하겠다

PlacesLibary를 써야 하기 때문에

  <script id="googleMap"
    src="https://maps.googleapis.com/maps/api/js?key=키셋팅&libraries=places"
    async defer></script>

이와 같이 선언해준다.

<!--searchbar-->
<ion-searchbar id=searchBar *ngIf="searchToggled" showCancelButton=true (ionInput)="onSearchBar($event)" animated></ion-searchbar>

장소검색할 SearchBar를 먼저 html에 추가해주도록 한다

*ngIf를 통해 searchToggled가 true일 경우에만 보여주도록하고 ionInput 이벤트를 통해서 서치바를 운용해보자

  //boolean
  public searchToggled: boolean = false;

이와 같이 변수를 설정해주고

  /* 서치바 토글 */
  public searchToggle(): void {
    this.searchToggled = !this.searchToggled;
  }

해당 Function을 실행시켜주면 된다

 /** 
   *  SearchEvenet 실행
   * @param : event.target.value
   * @method : this.searchBox.getPlacePredictions
   * @method: this.zone.run()
   **/

  onSearchBar(event) {

    this.placeListBox = this.placeLIstElement.nativeElement; //장소,주소 검색시 나오는 창
    this.searchBox = new google.maps.places.AutocompleteService();

    // 검색창 value가 업을 시에
    if (event.target.value == '') {
      this.placeList = [];
      return;
     }

    //GoogleSearch Services
    this.searchBox.getPlacePredictions({
        input: event.target.value,
        componentRestrictions: {
        country: 'kr'
      }
    }, (predictions, status) => {
      
      this.placeList = [];

      this.zone.run(() => {
        if (predictions != null) {
           predictions.forEach((prediction) => {
             this.placeList.push(prediction.description);
           });
          }
        });
    });
  }

ionInput 이벤트 function 이다

this.placeListBox -> document.getElementsById가 안되기 때문에 nativeElement로 Html 객체를 가져오자

this.searchBox -> googleMaps에서 제공해주는 AutocompleteServices를 할당해준다.

this.searchBox.getPlacePrediction 내 input은 당연히 searchbar 내 value를 넣어줘야한다.

this.zone.run()에서 forEach를 통해 this.placeList라는 배열에 push를 해준다음 검색값을 뷰잉해주자.

 

이제 장소검색창을 hidden 상태에서 값이 있을 경우에만 보여줘야하기때문에

<!--장소검색 창 hidden-->
<ion-list #placelist [hidden]="placeList.length == 0">
  <ion-item lines="none" class="placelist" *ngFor="let place of placeList ; let i = index" (ionInput)="onSearchBar($event)" (click)="getPlacegeoCode(place)">
   <ion-icon name="pin" slot="start"></ion-icon> {{ place }}
  </ion-item>
</ion-list>

hidden 조건을 성립해준뒤 ngFor를 인용하여 forEach를 돌려준다.

이제 item을 클릭했을 시에 해당 위치로 이동하게 하기위해

/** 
   *  장소 검색 뒤 맵 이동
   * @param : address:any
   **/
  getPlacegeoCode(address: any) {

    this.placeList = []; //클릭시 검색 value 초기화

    this.geocoder = new google.maps.Geocoder();
    this.geocoder.geocode({ 'address': address }, (results) => {

      /* 검색값  lat, lon */
      this.placeGeometry = {
        lat: results[0].geometry.location.lat(),
        lng: results[0].geometry.location.lng()
      }

      /* 마커 옵션 */
      this.markerOptions.position = this.placeGeometry;
      this.markerOptions.map = this.map;
      this.markerOptions.animation = google.maps.Animation.BOUNCE;
      this.markerOptions.draggable = false;
      this.markerOptions.zoom = this.map.setZoom(8);

      this.marker = new google.maps.Marker(this.markerOptions);
      this.markers.push(this.marker);

      /* 검색값 해당위치로 이동 */
      this.map.panTo(this.placeGeometry);
      this.map.setZoom(18);
      // this.deleteMarkers();
    });
  }

this.geocoder에 Geocoder를 선언해준뒤에 lat,lon 받아와서 map.panTo로 이동해주면 되겠다

markerOptions은 필자의 옵션이기에 아무렇게나 줘도 된다.