<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다음 지도 API</title>
</head>
<body>
<div id="map" style="width:750px;height:350px;"></div>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=0534688966ae7b4ea20ffd95099348e8"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.56690, 126.97828), // 지도의 중심좌표
level: 2, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(37.56690, 126.97828), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
kakao.maps.event.addListener(marker, 'click', function() {
alert('마커를 클릭했습니다!');
});
// 커스텀 오버레이를 생성하고 지도에 표시한다
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
content: '<div style="padding:0 5px;background:#fff;">진형이집 놀러오세요!</div>',
position: new kakao.maps.LatLng(37.56690, 126.97828), // 커스텀 오버레이를 표시할 좌표
xAnchor: 0.5, // 컨텐츠의 x 위치
yAnchor: 0 // 컨텐츠의 y 위치
});
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
content: '<div style="padding:0 5px;background:#fff;">진형이집 놀러오세요!</div>',
position: new kakao.maps.LatLng(38.56690, 128.97828), // 커스텀 오버레이를 표시할 좌표
xAnchor: 0.5, // 컨텐츠의 x 위치
yAnchor: 0 // 컨텐츠의 y 위치
});
</script>
</body>
</html>
'프로젝트 > Spring Framework Project' 카테고리의 다른 글
| 친구페이지 (0) | 2023.08.14 |
|---|---|
| 팀별 게시판 구축 (1) | 2023.08.13 |
| 파티 수정 시 file upload 구현 (0) | 2023.08.12 |
| 8.11 할일 (0) | 2023.08.11 |
| map 고군분투. (0) | 2023.08.06 |
