만들다 팁!

다음지도 보이기

관리자 0 309 2017.08.03 14:01
아래의 내용을 파일로 만들어서 보이게 하면
링크와 같이 
검색가능한 지도 가 생성됩니다.

물론, 이전에 카카오 지도에서 API를 등록하고
맵을 출력할 사이트를 등록한후에 진행해야 가능합니다.
발급받은API키 정보는 수정해야겠죠?


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>키워드로 장소검색하기</title>
    
</head>
<body>
<div id="map" style="width:500;height:450px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키&libraries=services"></script>
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
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 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 

// 장소 검색 객체를 생성합니다
var ps = new daum.maps.services.Places(); 


// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
    if (status === daum.maps.services.Status.OK) {

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        var bounds = new daum.maps.LatLngBounds();

        for (var i=0; i<data.length; i++) {
            displayMarker(data[i]);    
            bounds.extend(new daum.maps.LatLng(data[i].y, data[i].x));
        }       

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
        map.setBounds(bounds);
    } 
}

// 지도에 마커를 표시하는 함수입니다
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);
    });
}
function searchmap(stitle)	{
	// 키워드로 장소를 검색합니다
	ps.keywordSearch(stitle, placesSearchCB); 
}
</script>
<div id="objs">
장소검색 : <input type="text" name="stitle" id="stitle" value="양재"><input type="button" name="sss" value=" 검색 "
onclick="searchmap(document.getElementById('stitle').value);">
</body>
</html>
[이 게시물은 관리자님에 의해 2017-10-18 09:56:45 자유롭게시판 에서 이동 됨]

Comments

Category
State
  • 현재 접속자 6 명
  • 오늘 방문자 31 명
  • 어제 방문자 50 명
  • 최대 방문자 386 명
  • 전체 방문자 32,674 명
  • 전체 게시물 128 개
  • 전체 댓글수 119 개
  • 전체 회원수 7 명
Facebook Twitter GooglePlus KakaoStory NaverBand