네이버 지도 v3, 장고 위젯 예시

README.md

네이버 지도 v3 지도, 장고 Point 위젯

• 지도 client id 발급 : https://developers.naver.com/register?defaultScope=map
• 최소 입력 : 애플리케이션 이름, 카테고리, 웹서비스 URL, 약관 동의
• 웹서비스 URL 예시 : 테스트 서버에서는 http://localhost:8000 을 입력
• 발급받은 client_id 는 settings 내에 명시하여 import 를 시켜줍니다.

forms.py

from django import forms
from django.core.validators import RegexValidator
from .widgets import NaverMapPointWidget


class PostForm(forms.Form):
    point = forms.CharField(validators=[RegexValidator(r'^[+-]?[\d\.]+,[+-]?[\d\.]+$')], widget=NaverMapPointWidget)

naver_map_point_widget.html

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId={{ naver_client_id }}"></script>

<style>
#naver_map_point_{{ id }} {
    width: {{ width }};
    height: {{ height }};
}
</style>
<div id="naver_map_point_{{ id }}"></div>
<script>
(function() {
    var base_point = new naver.maps.LatLng({{ base_lat }}, {{ base_lng }});
    var map = new naver.maps.Map(document.getElementById('naver_map_point_{{ id }}'), {
        center: base_point
    });

    var marker = new naver.maps.Marker({
        position: base_point,
        map: map
    });

    naver.maps.Event.addListener(map, 'click', function(e) {
        marker.setPosition(e.coord);
        document.getElementById('{{ id }}').value = e.coord.lng() + ',' + e.coord.lat();
    });
})();
</script>

settings.py

# 중략

NAVER_CLIENT_ID = ''  # FIXME: https://developers.naver.com/register?defaultScope=map 를 통해 발급

widgets.py

import re
from django import forms
from django.conf import settings
from django.template.loader import render_to_string


class NaverMapPointWidget(forms.TextInput):
    def render(self, name, value, attrs=None):
        if not attrs: attrs = {}
        attrs['readonly'] = 'readonly'

        width = str(self.attrs.get('width', 800))
        height = str(self.attrs.get('height', 600))
        if width.isdigit():
            width += 'px'
        if height.isdigit():
            height += 'px'

        context = dict(attrs, **self.attrs)

        # default point : 강남역
        context['base_lat'] = '37.497921'
        context['base_lng'] = '127.027636'

        context['naver_client_id'] = settings.NAVER_CLIENT_ID
        context['width'] = width
        context['height'] = height

        if value:
            try:
                lng, lat = re.findall(r'[+-]?[\d\.]+', value)
                context['base_lat'] = lat
                context['base_lng'] = lng
            except (IndexError, ValueError):
                pass

        rendered = super(NaverMapPointWidget, self).render(name, value, attrs)
        html = render_to_string('naver_map_point_widget.html', context)

        return rendered + html