YujeLee

maptest css 수정

......@@ -6,7 +6,9 @@
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: #212620;
}
.nav-bar
{
position: relative;
......@@ -48,11 +50,21 @@
.welcome{
position: absolute;
font-size: 30px;
width: 100%;
top:20%;
left: 50%;
width: 700px; height: 160px;
transform: translate(-50%,-50%);
margin-top: 40px;
text-align:center;
font-family: sans-serif;
color:#000;
color:#fff;
}
.map-box{
width:100%
}
.empty-box{
position:absolute;
bottom:0%;
}
\ No newline at end of file
......
......@@ -21,23 +21,22 @@
</ul>
</div>
<div class="welcome">
<h1>어떤 공연을 찾으시나요?</h1>
<a href="mappage" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login" class="btn btn3">로그인</a>
<h1>당신 주위에서 열릴 공연들입니다</h1>
</div>
</header>
<div id="map"
style="
position: absolute;
border-radius: 5%;
width:500px; height:350px;
top:50%;
left: 50%;
"></div>
<div>
</div>
<div class="map-box">
<div id="map"
style="
position: absolute;
border-radius: 5%;
width:500px; height:350px;
top:50%;
left: 30%;
"></div>
</div>
<div class="empty-box">
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
......@@ -58,7 +57,7 @@ if (navigator.geolocation) {
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다
displayMarker(locPosition, message);
var data=[];
......@@ -84,7 +83,7 @@ if (navigator.geolocation) {
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
......