ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Google Maps] 3. 구글 맵스 오버레이(Overlays) - 구글 맵 API 강좌
      Web/Google Maps 2016. 2. 28. 15:48

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


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



      구글 맵 API 기본(Basic)

      구글 맵 API 오버레이(Overlays)

      구글 맵 API 이벤트(Events)

      구글 맵 API 제어(Controls)

      구글 맵 API 타입(Types)



      Google Maps Overlays

       구글 맵에 마커를 추가합니다.



       Google Maps - Overlays

        오버레이(Overlays)는 맵에 위도 경도 좌표를 표시하기위한 객체입니다.


        구글 맵은 여러 타입의 오버레이를 가지고 있습니다:

        - 마커(Marker): 맵에 단일 위치를 표시. 마커는 또한 특정 아이콘 이미지를 통해 표시할 수 있습니다.

        - 선(Polyline): 맵에 선분을 연결한 선

        - 다각형(Polygon): 닫힌 도형

        - 원과 사각형(Circle and Rectangle)

        - 정보 창(Info Windows): 맵에 팝업 창으로 정보를 표시

        - 커스텀 오버레이(custom overlays)




       Google Maps - Add a Marker

        마커 생성자(Marker Constructor)는 마커를 생성합니다.(위치 속성을 마커를 표시하기 위해 꼭 작성해야합니다)


        setMap() 메소드를 사용해서 마커를 맵에 추가합니다.



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



       






       Google Maps - Animate the Marker

        아래 예제는 애니메이션 속성을 통해서 마커를 어떻게 움직이는 지 보여줍니다.


      1
      2
      3
      4
      5
      6
      7
       
      var marker=new google.maps.Marker({
        position:myCenter,
        animation:google.maps.Animation.BOUNCE
        });
       
      marker.setMap(map);
      		cs




       Google Maps - Icon Instead of Marker

        아래 예제는 기본 마커 대신에 특정 이미지를 사용하여 마커를 생성하는 예제입니다.



      1
      2
      3
      4
      5
      6
      var marker=new google.maps.Marker({
        position:myCenter,
        icon:'pinkball.png'
        });
       
      marker.setMap(map);
      		cs





       Google Maps - Polyline

        선(Polyline)은 일련의 순서로 정렬된 좌표를 이은 선입니다.


        선은 아래와 같은 속성을 지원합니다:

        - Path: 라인을 위한 여러 개의 위도/경도를 명시

        - strokeColor: 선을 위한 16진법 색으로 명시

        - strokeOpacity: 선의 불투명도를 명시

        - strokeWeight: 선의 굵기를 명시

        - ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)


      1
      2
      3
      4
      5
      6
      7
      var myTrip = [stavanger,amsterdam,london];
      var flightPath = new google.maps.Polyline({
        path:myTrip,
        strokeColor:"#0000FF",
        strokeOpacity:0.8,
        strokeWeight:2
      });
      		cs




       Google Maps - Polygon

        다각형(Polygon)은 선과 비슷합니다. 그러나, 다각형은 닫힌 구간으로 이루어진 도형으로 구성되어집니다.


        다각형은 아래와 같은 속성을 지원합니다:

        - Path: 선의 위도/경도 좌표를 명시(첫과 끝의 좌표는 동일)

        - strokeColor: 선을 위한 16진법 색으로 명시

        - strokeOpacity: 선의 불투명도를 명시

        - strokeWeight: 선의 굵기를 명시

        - fillColor: 닫힌 영역안의 색상을 채우기 위한 색을 명시
        - fillOpacity: 닫힌 영역안의 불투명도를 위한 명시

        - ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)



       * polygon.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
      <!DOCTYPE html>
      <html>
      <head>
      <script
      src="http://maps.googleapis.com/maps/api/js">
      </script>
       
      <script>
      var x=new google.maps.LatLng(37.250943, 127.028344);
      var seoul=new google.maps.LatLng(37.541420, 126.991610);
      var suwon=new google.maps.LatLng(37.250943, 127.028344);
      var incheon=new google.maps.LatLng(37.438567, 126.664466);
       
      function initialize()
      {
      var mapProp = {
        center:x,
        zoom:9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
       
      var myTrip=[seoul,suwon,incheon,seoul];
      var flightPath=new google.maps.Polygon({
        path:myTrip,
        strokeColor:"#0000FF",
        strokeOpacity:0.8,
        strokeWeight:2,
        fillColor:"#0000FF",
        fillOpacity:0.4
        });
       
      flightPath.setMap(map);
      }
       
      google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      </head>
       
      <body>
      <div id="googleMap" style="width:500px;height:380px;"></div>
      </body>
      </html>
       
      		cs






       Google Maps - Circle
        원(Circle)은 아래 속성을 지원합니다:
        - center: 원의 중심부를 google.maps.LatLng로 명시
        - radius: 원의 반경을 명시

        - strokeColor: 원의 테두리 선을 위한 16진법 색으로 명시

        - strokeOpacity: 선의 불투명도를 명시

        - strokeWeight: 선의 굵기를 명시

        - fillColor: 닫힌 영역안의 색상을 채우기 위한 색을 명시
        - fillOpacity: 닫힌 영역안의 불투명도를 위한 명시

        - ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)



      1
      2
      3
      4
      5
      6
      7
      8
      9
      var myCity = new google.maps.Circle({
        center:suwon,
        radius:20000,
        strokeColor:"#0000FF",
        strokeOpacity:0.8,
        strokeWeight:2,
        fillColor:"#0000FF",
        fillOpacity:0.4
      });
      		cs




       Google Maps - InfoWindow
        텍스트와 마커를 통한 InforWindow를 보이는 예제입니다:

      1
      2
      3
      4
      5
      var infowindow = new google.maps.InfoWindow({
        content:"Hello World!"
        });
       
      infowindow.open(map,marker);
      		cs





      end



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

      저작자표시

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

      [Google Maps] 6. 구글 맵스 타입(Types) - 구글 맵 API 강좌  (0) 2016.02.29
      [Google Maps] 5. 구글 맵스 제어(Controls) - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 4. 구글 맵스 이벤트(Events) - 구글 맵 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.

    티스토리툴바