<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><section class="sub">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<head>
    <meta charset="utf-8">
    <title>클릭한 위치에 마커 표시하기</title>
    
</head>
<body>
<style type="text/css">
body {margin:0;}
</style>
<div class="content"><!-- heading(공통) -->
<div class="heading"></div>

<div class="subCont">
<div class="mapWrap"><script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7fc7b80a3e32ac964da92f6aa3d6000d"></script>
<div id="map" style="width:100%;height:100vh">&nbsp;</div>

<div class="mapInfo">
</div>
</div>

</div>
</div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = { 
    center: new kakao.maps.LatLng(<c:out value="${lat}"/>, <c:out value="${lng}"/>), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
};

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

//마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(<c:out value="${lat}"/>, <c:out value="${lng}"/>); 

//마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});

//마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

</script>
</body>