FrontEnd
카카오 지도
xeant
조회 수 : 53
2024.02.26 13:31
: 0
``` <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c47f9d6f7aa6832f8e915c05ab6ee094"></script> <!-- http://dna.daum.net/myapi/mapsapi --> <div id="map" style="width:100%;height:350px;"></div> <div style="margin-top:20px; "> <h5 style="padding: 3px 20px; border-radius: 18px; border: 2px solid rgb(102, 102, 102); border-image: none; font-size: 18px; display: inline-block;">연락처</h5> <p>TEL : 02-969-9936 <span style="color: rgb(52, 152, 219);">ㅣ</span> FAX : 02-969-9937 <span style="color: rgb(52, 152, 219);">ㅣ</span> E-mail : <a href="mailto:master@eastse.net">master@eastse.net</a></p> <p> </p> <h5 style="padding: 3px 20px; border-radius: 18px; border: 2px solid rgb(102, 102, 102); border-image: none; font-size: 18px; display: inline-block;">업무시간</h5> <p>운영일 : 월요일~금요일 9:30 ~ 18:30 <span style="color: rgb(52, 152, 219);">ㅣ</span>휴일 : 토,일요일 및 법정 공휴일</p> <p> </p> <h5 style="padding: 3px 20px; border-radius: 18px; border: 2px solid rgb(102, 102, 102); border-image: none; font-size: 18px; display: inline-block;">찾아오시는 길</h5> <p>서울특별시 동대문구 답십리로 38길 19 2층</p> </div> <script> var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.5733398, 127.0500436), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 // 마커가 표시될 위치입니다 var markerPosition = new kakao.maps.LatLng(37.5733398, 127.0500436); // 마커를 생성합니다 var marker = new daum.maps.Marker({ position:markerPosition }); marker.setMap(map); var zoomControl = new daum.maps.ZoomControl(); map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT); var mapTypeControl = new daum.maps.MapTypeControl(); map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT); var str = "<div class='marker_text'>동사경센터</div>"; var infowindow = new daum.maps.InfoWindow({ content: str,removable : true }); daum.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); infowindow.open(map, marker); // 마커가 지도 위에 표시되도록 설정합니다 marker.setMap(map); // 아래 코드는 지도 위의 마커를 제거하는 코드입니다 // marker.setMap(null); </script> <style> .marker_text {padding:20px; } </style> ```
https://developers.kakao.com/