1. Home
  2. Docs
  3. woocommerce product &#038...
  4. html 편집기로 지도 코드 바로 넣기

html 편집기로 지도 코드 바로 넣기

contact 폼과 같은 곳에서만 지도 사용 시, html 코드 입력에 다음지도 코드를 바로 넣기

<div id="map" style="width:100%;height:500px;"></div>

<script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=keykeykeykeykeykey&libraries=services"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div (위에)
        mapOption    = {
            center: new daum
                .maps
                .LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level : 6 // 지도의 확대 레벨
        };

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

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new daum
        .maps
        .services
        .Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch('주소주소주소주소 123', function (result, status) {

        // 정상적으로 검색이 완료됐으면
        if (status === daum.maps.services.Status.OK) {

            var coords = new daum
                .maps
                .LatLng(result[0].y, result[0].x);

            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new daum
                .maps
                .Marker({map: map, position: coords});

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new daum
                .maps
                .InfoWindow({
                    content: '<div style="width:150px;text-align:center;padding:6px 0;">BRAND<br /><a href' +
                                '="http://map.daum.net/link/search/주소주소주소주소" style="color:blue" targ' +
                                'et="_blank">큰지도 보기</a></div>'
                });
            infowindow.open(map, marker);

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        }
    });
</script>