wlstp8473

location_module_err

1 +// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
2 +var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
3 +
4 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
5 + mapOption = {
6 + center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표 장소 위치 변경##################
7 + level: 3 // 지도의 확대 레벨
8 + };
9 +
10 +// 지도를 생성합니다
11 +var map = new kakao.maps.Map(mapContainer, mapOption);
12 +
13 +// 장소 검색 객체를 생성합니다
14 +var ps = new kakao.maps.services.Places();
15 +
16 +// 키워드로 장소를 검색합니다
17 +ps.keywordSearch('인덕원 맛집', placesSearchCB); //search keyword 변경
18 +
19 +// 키워드 검색 완료 시 호출되는 콜백함수 입니다
20 +function placesSearchCB(data, status, pagination) {
21 + if (status === kakao.maps.services.Status.OK) {
22 +
23 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
24 + // LatLngBounds 객체에 좌표를 추가합니다
25 + var bounds = new kakao.maps.LatLngBounds();
26 +
27 + for (var i = 0; i < data.length; i++) {
28 + displayMarker(data[i]);
29 + bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
30 + }
31 +
32 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
33 + map.setBounds(bounds);
34 + }
35 +}
36 +
37 +// 지도에 마커를 표시하는 함수입니다
38 +function displayMarker(place) {
39 +
40 + // 마커를 생성하고 지도에 표시합니다
41 + var marker = new kakao.maps.Marker({
42 + map: map,
43 + position: new kakao.maps.LatLng(place.y, place.x)
44 + });
45 +
46 + // 마커에 클릭이벤트를 등록합니다
47 + kakao.maps.event.addListener(marker, 'click', function () {
48 + // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
49 + infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
50 + infowindow.open(map, marker);
51 + });
52 +}
...\ No newline at end of file ...\ No newline at end of file