지도 API를 사용중인데, 출력은 되지만, 이상하게 출력이됩니다.
맵의 중앙이 보여야하는데, 맵이 언제나 왼쪽상단만 출력되고 나머지 부분은 저런식으로 보이지 않아 곤란한 상황입니다.
JavaScript와 html을 함께 사용중이며, 아래는 코드입니다…
JavaScript
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
var geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(`${도로명주소}`, 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);
}
});
html
<div class="row">
<div class="col-md-12">
<div class="modal fade" id="modal-container-721379" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">
지도보기
</h5>
</div>
<div class="modal-body">
<div id="map" style="width:300px; height: 200px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
혹시 원인을 알 수 있을까요?