제목 그대로 Daum에서 배포하는 지도 API를 가지고
블로그에 글 작성시 지도를 띄어주는 코드를
구현하고 싶은데요.
예를 들어, A 맛집의 위치를 공유하고자
주소를 검색하고, 검색 된 주소의 위치를
지도로 블로그에 삽입하는 코드입니다.
지도를 띄우는 것 까지는 구현했지만,
주소 검색하여 삽입하는 것에서부터 막막하여 질문드립니다.
고수님들 도와주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주소로 장소 표시하기</title>
</head>
<div id="map" style="width:750px;height:350px;"></div>
<script src="//apis.daum.net/maps/maps3.js?apikey=9c581aeb3422b884b89826f62e7edba0"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.56561, 126.98809), // 지도의 중심좌표
level: 6, // 지도의 확대 레벨
mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new daum.maps.Map(mapContainer, mapOption);
// 지도 타입 변경 컨트롤을 생성한다
var mapTypeControl = new daum.maps.MapTypeControl();
// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new daum.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
// 지도 중심 좌표 변화 이벤트를 등록한다
daum.maps.event.addListener(map, 'center_changed', function () {
console.log('지도의 중심 좌표는 ' + map.getCenter().toString() +' 입니다.');
});
// 지도 확대 레벨 변화 이벤트를 등록한다
daum.maps.event.addListener(map, 'zoom_changed', function () {
console.log('지도의 현재 확대레벨은 ' + map.getLevel() +'레벨 입니다.');
});
// 지도 클릭 이벤트를 등록한다 (좌클릭 : click, 우클릭 : rightclick, 더블클릭 : dblclick)
daum.maps.event.addListener(map, 'click', function (mouseEvent) {
console.log('지도에서 클릭한 위치의 좌표는 ' + mouseEvent.latLng.toString() + ' 입니다.');
});
// 지도에 마커를 생성하고 표시한다
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.56561, 126.98809), // 마커의 좌표
draggable : true, // 마커를 드래그 가능하도록 설정한다
map: map // 마커를 표시할 지도 객체
});
// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
daum.maps.event.addListener(marker, 'click', function() {
alert('마커를 클릭했습니다!');
});
</script>
</body>
</html>
