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.250943127.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.250943127.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.250943127.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'를 통해 작성하였습니다.

    댓글

Designed by Tistory.