Polymer는 Google에서 개발한 웹 컴포넌트를 구축하기 위한 JavaScript 라이브러리입니다. 이 글에서는 Polymer를 사용하여 인터랙티브 맵을 개발하는 방법을 알아보겠습니다.

Polymer 프로젝트 설정

먼저, Polymer 프로젝트를 설정해야 합니다. Polymer CLI(Command Line Interface)를 사용하여 프로젝트를 생성할 수 있습니다. 다음 명령어를 터미널에서 실행하여 Polymer CLI를 설치합니다.

npm install -g polymer-cli

Polymer CLI가 설치되었다면, 프로젝트 폴더를 생성하고 해당 폴더에서 다음 명령어를 실행하여 Polymer 프로젝트를 생성합니다.

polymer init

프로젝트 생성 시, Starter Kit을 선택하고 필요한 기능에 대한 설정을 진행합니다.

맵 컴포넌트 추가

생성한 Polymer 프로젝트에는 기본적으로 my-app이라는 루트 컴포넌트가 포함되어 있습니다. 여기에 맵 컴포넌트를 추가해보겠습니다.

먼저, src 폴더 아래에 map-component.html 파일을 생성합니다. 이 파일은 맵 컴포넌트를 정의하는 파일입니다.

<link rel="import" href="../@polymer/polymer/polymer-element.html">
<link rel="import" href="../@googlemaps/web-components/dist/google-maps.html">

<dom-module id="map-component">
  <template>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
    <div id="map"></div>
  </template>

  <script>
    class MapComponent extends Polymer.Element {
      static get is() { return 'map-component'; }

      ready() {
        super.ready();
        this.initMap();
      }

      initMap() {
        const mapOptions = {
          center: { lat: 37.5665, lng: 126.9780 },
          zoom: 10
        };
        const map = new google.maps.Map(this.$.map, mapOptions);
      }
    }

    customElements.define(MapComponent.is, MapComponent);
  </script>
</dom-module>

위의 코드를 보면, google-maps 웹 컴포넌트를 사용하여 맵을 생성하는 방법을 알 수 있습니다. 맵 컴포넌트는 dom-module으로 정의되며, dom-module에는 HTML 템플릿과 JavaScript 코드가 포함됩니다.

initMap 함수에서는 google.maps.Map 생성자를 사용하여 맵을 초기화합니다. 위 코드에서는 서울을 기준으로 위치하고 확대/축소 수준은 10으로 설정하였습니다.

맵 컴포넌트 사용

맵 컴포넌트를 사용하기 위해 my-app 컴포넌트에 맵 컴포넌트를 추가해보겠습니다.

먼저, src 폴더 아래에 있는 my-app.html 파일을 열고 맵 컴포넌트를 추가합니다.

<link rel="import" href="./map-component.html">

<dom-module id="my-app">
  <template>
    <map-component></map-component>
  </template>

  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
    }

    customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

위의 코드에서 map-component를 임포트하여 <map-component></map-component>로 추가하였습니다.

결과 확인

맵 컴포넌트를 사용하는 애플리케이션을 실행해보겠습니다. 터미널에서 다음 명령어를 실행하여 애플리케이션을 시작합니다.

polymer serve

웹 브라우저에서 http://localhost:8080 주소로 접속하면 맵을 확인할 수 있습니다. 맵이 성공적으로 나타난다면 인터랙티브 맵 개발을 성공적으로 완료한 것입니다.

마무리

이번 글에서는 Polymer를 사용하여 인터랙티브 맵을 개발하는 방법에 대해 알아보았습니다. Polymer는 웹 컴포넌트 개발을 쉽고 간편하게 만들어주는 강력한 도구입니다. 맵 컴포넌트에 필요한 기능을 추가하거나 다양한 스타일링을 적용하여 개인의 프로젝트에 맞게 커스터마이징할 수 있습니다. 자세한 내용은 Polymer 공식 문서를 참고하시기 바랍니다.

참고 링크:

• Polymer 공식 문서
• Google Maps 웹 컴포넌트