backbone.js View에 다음지도 적용하기

view, model, collection, router등 내 머릿속엔 아직도 정리가 되어 있지 않지만,

먼저 다음 지도 api를 활용해서 backbone.js view로 구현한 것을 첨부하겠습니다.

저의 github에도 다른 코드가 있으니, 허접하지만 이 친구는 이렇게 생각했구나 아직 노력이 더 필요하구나 라고 봐주셨으면 감사하겠습니다.

github : https://github.com/BoABae/pj_fc

backbone.js view daum map api

	var mapView = Backbone.View.extend({
	el : $("#content"),
	events: {
	'click #search' : 'search'
	},
	initialize : function() {
	var self = this;
	this.render();
	},
	render : function() {
	var template = _.template($("#map_html").html(), {});
	this.$el.html(template);
	var map = new daum.maps.Map(document.getElementById('map'),
	this.mapOptions);
	var zoomControl = new daum.maps.ZoomControl();
	map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
	},
	mapOptions : {
	center : new daum.maps.LatLng(37.404337, 127.106141), // 지도의 중심좌표
	level : 3
	},
	search: function(){
	var map = new daum.maps.Map(document.getElementById('map'),
	this.mapOptions);
	var geocoder = new daum.maps.services.Geocoder();
	var ad = document.getElementById("address").value;
	geocoder.addr2coord(ad, function(status, result){
	if(status === daum.maps.services.Status.OK){
	var coords = new daum.maps.LatLng(result.addr[0].lat,
	result.addr[0].lng);
	var marker = new daum.maps.Marker({
	map : map,
	position : coords,
	draggable : true
	});
	map.setCenter(coords);
	}else{
	console.log("잘못된 주소입니다");
	}
	});
	},
	});
	var mv = new mapView();

html

<div id="content"></div>

<script type="text/template" id="map_html">

<div id="map"></div>

<input type="text" id="address">

<button id="search">search</button>

<div id="show"></div>

</script>

실행화면