ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Google Maps] 5. 구글 맵스 제어(Controls) - 구글 맵 API 강좌
      Web/Google Maps 2016. 2. 28. 16:29

      W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


      구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



      구글 맵 API 기본(Basic)

      구글 맵 API 오버레이(Overlays)

      구글 맵 API 이벤트(Events)

      구글 맵 API 제어(Controls)

      구글 맵 API 타입(Types)





      Google Maps Controls


       Google Maps - The Default Controls

        기본 구글 맵을 보면, 기본 제어 셋을 볼 수 있습니다:

        - Zoom: 맵의 줌 레벨을 제어하는 버튼인 "+/-" 슬라이더

        - Pan: panning을 하기 위한 pan 컨트롤

        - MapType: 맵 타입을 변경하기 위한 버튼

        - Street View: 스트릿 뷰를 보기위한 버튼



       Google Maps - More Controls

        기본 제어 셋 이외에도 아래와 같은 제어 셋이 있습니다:

        - Scale: 맵의 크기 단위를 보임

        - Rotate: 맵을 회전시키기 위한 작은 원형 아이콘

        - Overview Maps: 현재 맵에서의 전반적인 썸네일(Thumbnail)




       Google Maps - DIsabling The Default Controls

        기본 제어 셋을 끄고 싶다면 아래와 같이 해주시면 됩니다.


        mapProp에 추가시켜주시면 됩니다.


      1
      2
       
      disableDefaultUI:true
      		cs





       Google Maps - Turn On All Controls

        몇몇 제어 셋은 맵에 기본적으로 보이나, 다른 제어 셋은 보이지 않을 수도 있습니다.


        맵 옵션 객체에 추가 혹은 삭제를 통해서 맵에 제어 셋을 보일 수 있습니다.


      1
      2
      3
      4
      5
      6
      7
      panControl:true,
      zoomControl:true,
      mapTypeControl:true,
      scaleControl:true,
      streetViewControl:true,
      overviewMapControl:true,
      rotateControl:true
      		cs





       Google Maps - Modifying Controls

        몇몇 맵 제어는 설정 가능합니다.


        제어는 제어 옵션 필드(control options fields)에 의해 변경 가능합니다.


        예를 들어, 줌 제어 변경을 위한 옵션은 zoomControlOptions 필드에서 명시됩니다. zoomControlOptions 필드는 아래와 같은 속성을 포함합니다:

        - google.maps.ZoomControlStyle.SMALL: 작은 줌 컨트롤 표시

        - google.maps.ZoomControlStyle.LARGE: 표준 줌 슬라이더 컨트롤 표시

        - google.maps.ZoomControlStyle.DEFAULT: 기기와 맵 사이즈를 기반으로한 최적으 줌 컨트롤 표시



       * zoomControl.html


      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
      <!DOCTYPE html>
      <html>
      <head>
      <script
      src="http://maps.googleapis.com/maps/api/js">
      </script>
       
      <script>
      function initialize()
      {
        var mapProp = {
          center: new google.maps.LatLng(37.250943, 127.028344),
          zoom:7,
          zoomControl:true,
          zoomControlOptions: {
            style:google.maps.ZoomControlStyle.SMALL
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      </head>
       
      <body>
      <div id="googleMap" style="width:500px;height:380px;"></div>
      </body>
      </html>
       
      		cs











       Google Maps - Custom Controls

        언제든지 자신이 지정한 위치로 이동하기위한 커스텀 컨트롤을 생성할 수 있습니다.



       * customControl.html


      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
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
       
      <!DOCTYPE html>
      <html>
      <head>
      <script
      src="http://maps.googleapis.com/maps/api/js">
      </script>
       
      <script>
      var map;
      var suwon = new google.maps.LatLng(37.250943, 127.028344);
       
      // Add a Home control that returns the user to Suwon
      function HomeControl(controlDiv, map) {
        controlDiv.style.padding = '5px';
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'yellow';
        controlUI.style.border='1px solid';
        controlUI.style.cursor = 'pointer';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Set map to Suwon';
        controlDiv.appendChild(controlUI);
        var controlText = document.createElement('div');
        controlText.style.fontFamily='Arial,sans-serif';
        controlText.style.fontSize='12px';
        controlText.style.paddingLeft = '4px';
        controlText.style.paddingRight = '4px';
        controlText.innerHTML = '<b>Home<b>'
        controlUI.appendChild(controlText);
       
        // Setup click-event listener: simply set the map to Suwon
        google.maps.event.addDomListener(controlUI, 'click', function() {
          map.setCenter(suwon, 37.250943, 127.028344)
        });
      }
       
      function initialize() {
        var mapDiv = document.getElementById('googleMap');
        var myOptions = {
          zoom: 12,
          center: suwon,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(mapDiv, myOptions); 
        // Create a DIV to hold the control and call HomeControl()
        var homeControlDiv = document.createElement('div');
        var homeControl = new HomeControl(homeControlDiv, map);
      //  homeControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
      }
       
      google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      </head>
       
      <body>
      <div id="googleMap" style="width:500px;height:380px;"></div>
      </body>
      </html>
       
      		cs







      end



      * 이 포스팅은 'w3school'를 통해 작성하였습니다.

      저작자표시

      'Web > Google Maps' 카테고리의 다른 글

      [Google Maps] 6. 구글 맵스 타입(Types) - 구글 맵 API 강좌  (0) 2016.02.29
      [Google Maps] 4. 구글 맵스 이벤트(Events) - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 3. 구글 맵스 오버레이(Overlays) - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 2. 구글 맵스 기본 - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 1. 개요(Tutorial) - 구글 맵 API 강좌  (0) 2016.02.28

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바