JSP/javascript jQuery

[API] 네이버 맵 api 사용해서 붙이기(반응형)

도미노& 2017. 5. 19. 12:04

point. 1라인 - width:100%로 설정 (함정이 있다면 세로는 자동으로 사이즈 안 줄어든다는 점..)

point. 4-10라인 - 저 설정을 넣어주면 1라인 width 100% 설정이 먹음


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="mt3 contact1 img_auto" id="map" style="width:100%;height:379px;"></div>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=sH9QK_fjg5_GHtSq7i1t"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(window).resize(function() {
   w = $(window).width()  - 95;
   h = $(window).height() - 50;
   oMap.setSize(new nhn.api.map.Size(w, h));
  });
 });
window.onload = function(){
  var icoordx = '좌표값';
  var icoordy = '좌표값';
  var position = new naver.maps.LatLng(icoordx, icoordy);
 
  var mapOptions = {
    center: position,
    zoom: 10,
    logoControl: false,
    draggable: true,
    disableDoubleClickZoom: true,
    disableDoubleTapZoom: true,
    disableTwoFingerTapZoom: true
  };
 
  var map = new naver.maps.Map('map', mapOptions);
 
  var markerOptions = {
    position: position,
    map: map
  };
 
  var marker = new naver.maps.Marker(markerOptions);
}
</script>
cs



참고: http://donzbox.tistory.com/548