#3 Ionic4(아이오닉4) GoogleMap 적용

좌측 GoogleMap, 우측 현재위치 lon,lat(위도, 경도) console.log 확인

요즈음 Ionic4 Framework를 공부중인데 너무나 어렵다. 자료가 죄다 영어인지라, 각설하고 시작하겠다

ionic start googleMap blank

프로젝트를 생성해준다.

npm i --save @ionic-native/geolocation@beta

터미널에서 geolocation npm install을 해준다.

import {Component, NgZone, ViewChild, OnInit, ElementRef} from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';

자신의 컴포넌트 ts에서 위 자료를 import 해준다.

export class HomePage implements OnInit{

  ngOnInit(): void {
  }

  
  @ViewChild('map') mapElement: ElementRef; //<div #map></div> 생성
  
    //변수선언
    map: any;
    mapOptions: any;
    location = {lat: null, lng: null};
    markerOptions: any = {position: null, map: null, title: null};
    marker: any;
    apiKey: any = '자신의 API KEY';

    constructor(public zone: NgZone, public geolocation: Geolocation) {
    
      /* GoogleMap Script 생성 */
        const script = document.createElement('script');
        script.id = 'googleMap';
        if (this.apiKey) {
            script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey;
        } else {
            script.src = 'https://maps.googleapis.com/maps/api/js?key=';
        }
        document.head.appendChild(script);
        
        /* 현재위치 가져오기 */
        this.geolocation.getCurrentPosition().then((resp) =>  {
            this.location.lat = resp.coords.latitude;
            this.location.lng = resp.coords.longitude;
        });
        
        /* 지도 정보 */
        this.mapOptions = {
            center: this.location,
            zoom: 21,
            mapTypeControl: false
        };
        
        /* 마커 */
        setTimeout(() => {
          this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
          console.log(this.location);
            /*Marker Options*/
            // this.markerOptions.position = this.geolocation;
            this.markerOptions.position = this.location;
            this.markerOptions.map = this.map;
            this.markerOptions.title = 'My Location';
            this.marker = new google.maps.Marker(this.markerOptions);
        }, 3000);
    }
  }

.map{
    height: 100%;
    width: 100%;
}

declare var google;

css 적용 후 ionic serve로 확인 만약에 google not defined이 나온다면 declare를 import절 아래에 선언해줄것!