// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new daum.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3; // 지도의 확대 레벨
mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new daum.maps.services.Places(map);
// 지도 타입 변경 컨트롤을 생성한다
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);
// 카테고리로 은행을 검색합니다
ps.categorySearch(‘PM9’, placesSearchCB, {useMapBounds:true});
// 마커 이미지의 주소
var markerImageUrl = ‘…/image/pill.JPG’,
markerImageSize = new daum.maps.Size(30, 30), // 마커 이미지의 크기
markerImageOptions = {
spriteOrigin : new daum.maps.Point(0, 0), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
spriteSize : new daum.maps.Size(40, 42), // 스프라이트 이미지의 전체 크기
offset : new daum.maps.Point(12, 13)// 마커 좌표에 일치시킬 이미지 안의 좌표
};
// 마커 이미지를 생성한다
var markerImage = new daum.maps.MarkerImage(markerImageUrl, markerImageSize, markerImageOptions);
// 지도에 마커를 생성하고 표시한다
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.56353, 126.99124), // 마커의 좌표
image : markerImage, // 마커의 이미지
map: map // 마커를 표시할 지도 객체
});
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === daum.maps.services.Status.OK) {
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
}
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
daum.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}