angular-naver-maps

A simple angular directive for inegrating Naver Maps.

Usage no npm install needed!

<script type="module">
  import angularNaverMaps from 'https://cdn.skypack.dev/angular-naver-maps';
</script>

README

angular-naver-maps

A simple angular directive for integrating Naver Maps

Bower version npm version

Use <ng-naver-map> for embedding a Naver map into your html

You can see a live demo here

The full Naver Map API is still unsupported, currently only the following features are supported (which should cover most use cases).

How to use

Create a Naver map API key https://developers.naver.com/register

include

<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=YOURKEY"></script>

get module using bower or npm

  • using bower bower install angular-naver-maps
  • using npm npm install angular-naver-maps

then add it before you app.js

  • if installed using bower
    <script src="bower_components/angular-naver-maps/angular-naver-maps.js"></script>
  • if installed using npm
    <script src="node_modules/angular-naver-maps/angular-naver-maps.js"></script>

Add the module to your angular app

angular.module('App', ['NaverMaps']);

Use available directives (this is taken from the demo)

<ng-naver-map
  zoom="11"
  center="'current-location'"
  zoom-control="true"
  zoom-control-options='{position:{right: 10,left: 10}}'
  size="['width', 400]"
  enable-wheel-zoom="false"
  on-center-changed="centerChanged(coord)">

    <ng-naver-map-marker
        ng-repeat="item in items"
        model="item"
        position='[37.5675451, 126.9773356]'
        on-click="log(model)"
        title="item.name">
    </ng-naver-map-marker>

</ng-naver-map>

Documentation

For the <ng-naver-map> directive

  • zoom Number refers to the zoom level the map should start with
  • min-max-level Array define zoom range (default:[1,14])
  • center can take 2 type of values to center the map
    • String 'current-location' use the geolocation api to get current location
    • Array [37.5675451, 126.9773356] latitudinal and longitudinal values
    • If omitted the map defaults to Soul
  • zoom-control-true Boolean to show the zoom controls (default:false)
  • zoom-control-options Object zoom controls options such as position
  • size indicating the size of the map in the form of an array
    • ['width', 400] set map with 100% of its container width and 400px height
    • ['width', 'height'] create a responsive map that scales to the width and height of its container
    • [800, 400] create a static map with width 800px and height 400px
  • enable-wheel-zoom Boolean (default:true)
  • enable-drag-pan Boolean (default:true)
  • enable-dbl-click-zoom Boolean (default:false)
  • map-mode Number takes one of three values 0, 1, 2 (default:0)
  • activate-traffic-map Boolean (default:false)
  • activate-bicycle-map Boolean (default:false)
  • on-center-changed is fired whenever center is changed
    • an object coord is passed to the function with the new center position

It is possible to place a marker on the map using <ng-naver-map-marker> directive

  • title String to display on hover
  • position Array with latitudinal and longitudinal values
  • model Object to pass on click
  • on-click function to call on click, passes model as an argument

It is possible to place an information window on the map using <ng-naver-map-infowindow> directive (uses transclusion)

  • index Integer to identify the window for future control
  • position Array with latitudinal and longitudinal values
  • model Object to pass on click
  • on-click function to call on click, passes model as an argument

To add HTML to the info window, simply transclude your HTML in the directive.

For additional feature requests submit an issue