Ionic Angular google map API 앵귤러 구글 맵 API 활용 예시

최종 구현 미리보기

 

 

npm i @angular/google-maps

구글 API 패키지 설치 CLI

 

<script src="https://maps.googleapis.com/maps/api/js?key=API키"></script>

0. 템플릿 최상단 (index.html)

 

<div class="h-40" *ngIf="isLocationLoaded"> <!-- geo 위치가 있을 시 보여주기 -->
    <google-map width="100%" height="100%" [options]="mapOptions" />
  </div>

1. 템플릿

 

import { GoogleMapsModule } from '@angular/google-maps';



mapOptions: google.maps.MapOptions = {};
isLocationLoaded = false;



ngOnInit(): void { // init 후크
    window.navigator.geolocation.getCurrentPosition( // 현재 geo 위치 가져오기
      (position) => {
        this.mapOptions.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        this.isLocationLoaded = true;
      },
      () => {
        this.isLocationLoaded = true;
      }
    );
  }

2. 컴포넌트

 

특정 위치 중심 지도 보여주기

 

 

<google-map width="100%" height="100%" [options]="branchOffice" >
      <map-marker *ngFor="let marker of markerOptions" [options]="marker"></map-marker>
    </google-map>

1. 구글 맵 태그 안에 마커 태그 넣기

 

 

import { GoogleMapsModule } from '@angular/google-maps';
import { MapMarker } from '@angular/google-maps';

headOffice: google.maps.MapOptions = {
    center: { lat: 35.123, lng: 126.123 },
    zoom: 16,
  };
  branchOffice: google.maps.MapOptions = {
    center: { lat: 35.123, lng: 126.123 },
    zoom: 16,
  };
  
  
markerOptions: google.maps.MarkerOptions[] = [
    {
      position: { lat: 35.123, lng: 126.123 },
      title: '본사',
      
    },
    {
      position: { lat: 35.123, lng: 126.123 },
      title: '지사',
      
    },
  ];

2. 컴포넌