카카오 api를 받아와서 주소로 장소를 표시할려고 하는데 화면을 출력했을 때 아주 작은 부부에만 지도를 볼 수 있고 나머지 화면에는 카카오 로고만 뜹니다. 카카오 api만 출력했을 때는 지도가 잘 떴는데 버튼을 클릭했을 때 지도가 나오게 할려고 설정을 한 순간부터 지도가 잘 안뜹니다,이럴 때는 어떻게 해야 하나요?
< 카카오 맵 코드>
<div id="map" class="myDiv" style="width:100%;height:350px;">
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=818dd4a57e9e35bee82d5b6284cabfe5&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(35.1584952142483, 129.06199399191797),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch('부산 부산진구 중앙대로 672', function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">삼정타워</div>'
});
infowindow.open(map, marker);
map.setCenter(coords);
}
});
geocoder.addressSearch('부산 부산진구 가야대로 772', function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">롯데백화점</div>'
});
infowindow.open(map, marker);
map.setCenter(coords);
}
});
</script>
</div>
< 버튼을 눌렀을 때 맵이 보이게 설정한 코드 >
<style>
.myDiv{
display: none;
}
</style>
<script>
function toggleDiv(divId) {
var mapDiv = document.getElementById("map");
var listDiv = document.getElementById("list");
if(divId === "map"){
mapDiv.style.display = "block";
listDiv.style.display = "none";
} else if(divId === "list"){
mapDiv.style.display = "none";
listDiv.style.display = "block";s
}
}
window.onload = function() {
var listDiv = document.getElementById("list");
listDiv.style.display = "block";
};
</script>
<button onclick="toggleDiv('map')">Gallery</button>
<button onclick="toggleDiv('list')">API</button>
근데 뭐가 잘못됐는지 확인하기 위해 F12를 누르면 갑자기 지도가 다 뜨는데 다시 F5를 눌러서 새로고침하면 다시 부분화면만 보여집니다,뭐가 문제인가요??