Angular Google Maps (AGM) 사용법

https://angular-maps.com/

Angular Google Maps Components

위에서 많은 참고 바람

 

네이버 지도를 사용하다가 해외 지도가 필요해서 구글맵도 사용하게되었다.

네이버 지도 사용방법은 다음시간에 한번 다뤄보겠다. 네이버 지도는 해외 지도를 제공안한다고 한다. 처음엔 뭔가 되는것 같아 보였는데 버그가 하도 많아서 됐다 안됐다 하는거 보고 찾아보고 문의도 해보니깐 지원을 안한다는 날벼락 같은 소리..! 왜 그걸 못봤지... 

 

구글맵은 이전에도 사용해본 경험이 있어서 적용하는데 크게 어렵진 않았다. 사실 apiKey 만 발급받으면 거의 끝!

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key

API 키 사용하기  |  Maps JavaScript API  |  Google for Developers

* 들어가서 발급받아 오기!!

 

사용법

1) Install Angular Google Maps

npm install @agm/core

 

 

2) AppModule 에 모듈 세팅하기

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    })
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

 

 

3) ts/js 파일에 작성

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'My first AGM project';
  lat = 51.678418;
  lng = 7.809007;
}

 

 

4) html 파일에 작성

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

 

그럼 아래처럼 기본 지도가 뜬다. 추가적으로 마커 표시나 마커위에 info 같은걸 달고 싶으면 추가적인 옵션을 설정해주면 된다.

 

 

5) 마커 및 info 설정

<agm-map [latitude]="59.326242" [longitude]="17.8419719" >
  <agm-marker [latitude]="59.326242" [longitude]="17.8419719">
    <agm-info-window>Börk</agm-info-window>
  </agm-marker>
</agm-map>

마커를 클릭하면 위에 info 표시가 뜨는 형태다.

만약에 info 표시를 항상 표시하고 싶으면[isOpen]="true" 이라는 옵션을 추가해서 항상 노출시키기 가능!

 

또한 옵션 설정을 여러가지로 커스텀 하고 싶으면 아래 처럼 커스텀 하기도 가능!

 

6) 옵션 설정

//html
<agm-map
  [latitude]="latitude"
  [longitude]="longitude"
  [zoom]="12"
  (mapReady)="onMapReady($event)">
</agm-map>

//ts
onMapReady(map) {
    this.map = map;
    this.map.setOptions({
      zoomControl: true,
      scrollwheel: true,
      zoomControlOptions: { position: 1 },
      maxZoom: 18, // 최대 줌
      minZoom: 1, // 최소 줌
      mapTypeControl: true, // 지도 유형(ROADMAP, SATELLITE, HYBRID 또는 TERRAIN)
      mapTypeControlOptions: {
        mapTypeId: google.maps.MapTypeId.SATELLITE,
      },
      disableDefaultUI: true, // 기본 UI 사용 여부
      disableDoubleClickZoom: true, // 더블클릭 중심으로 확대 사용 여부
      draggable: true, // 지도 드래그 이동 사용 여부
      keyboardShortcuts: true, // 키보드 단축키 사용 여부
      scaleControl: true, // 지도로 드래그해서 스트리트 뷰를 활성화할 수 있는 펙맨 아이콘이 있습니다. 기본적으로 이 컨트롤은 지도의 오른쪽 아래 근처에 나타납니다.
      streetViewControl: true, // 경사진 이미지가 포함된 지도에 틸트와 회전 옵션 조합을 제공합니다. 기본적으로 이 컨트롤은 지도의 오른쪽 아래 근처에 나타납니다.
      rotateControl: true, // 지도 배율 요소를 표시합니다. 이 컨트롤은 기본적으로 비활성화되어 있습니다.
    });
  }

 

 

추가적인 옵션 같은 경우엔 DOCS 를 확인해보기!

 

마지막으로 나같은 경우엔 기본 빨간 마커 대신 커스텀 해서 특정 html 으로 보여주기를 원했다. 그래서 커스텀 마커 부분을 찾아봤는데 iconUrl 를 사용해서 마커 커스텀은 가능하다. 아래 처럼 원하는 아이콘을 마커에다가 넣어주면 된다. 

 

7) 커스텀 마커

<agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [iconUrl]="m.icon">
    <agm-info-window>
      <strong>InfoWindow content</strong>
    </agm-info-window>
  </agm-marker>

 

 

하지만 내가 원하는건 이미지 아이콘이 아니라 html 작업이여서 해당 옵션은 사용할수가 없었다. html를 마커로 커스텀하는건 일반적으론 불가능하고 따로 css를 만져서 해결이 가능했다.

 

아래 처럼 직접 AGM 클라쓰를 컨트롤 해서 커스텀을 했다. 근데 이렇게 하면 적용안됌!!

.gm-style-iw,
  .gm-style-iw-tc::after {
    background-color: blue;
    color: white;
  }

 

 

그럼 어떻게 해야 하냐?? !important 작성하면 됌 ㅎㅎ 매우쉬움

스와이퍼 커스텀도 그랬는데 라이브러리 쓸때 css 건들일려면 해당 라이브러리 css 가 우선이니깐 !important 해줘야 먹힘;;

.gm-style-iw,
  .gm-style-iw-tc::after {
    background-color: blue !important;
    color: white !important;
  }

 

 

사용법 끝~