구글 맵 Overlays

구글 맵에 마커를 추가한다:

구글 맵 – Overlays

Overlays는 latitude/longitude 좌표와 결속되어 있는 맵의 objects이다.

구글 맵은 여러 유형의 overlays가 있다:

  • Marker – 맵 위의 Single locations. Markers는 사용자 정의 icon images를 표시할 수도 있다
  • Polyline – 맵 위의 일련의 직선
  • Polygon – 맵 위의 일련의 직선이  “closed”된 모양
  • Circle and Rectangle
  • Info Windows – map맵 위의 popup 풍선 안에 content를 표시한다
  • Custom overlays

구글 맵 – Marker 추가

marker 생성자는 marker를 생성한다. (marker를 표시하기 위해 position property가 설정되어야한다).

하는 setMap () method를 사용하여 지도에 marker를 추가한다 :

예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – Animate the Marker

아래의 예제는 animation property으로 marker를 애니메이션하는 방법을 보여준다:

예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – Marker 대신 Icon

The example below specifies an image (icon) to use instead of the default marker:

예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – Polyline

A Polyline is a line that is drawn through a series of coordinates in an ordered sequence.

A polyline supports the following properties:

  • path – specifies several latitude/longitude coordinates for the line
  • strokeColor – specifies a hexadecimal color for the line (format: “#FFFFFF”)
  • strokeOpacity – specifies the opacity of the line (a value between 0.0 and 1.0)
  • strokeWeight – specifies the weight of the line’s stroke in pixels
  • editable – defines whether the line is editable by users (true/false)
예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – Polygon

A Polygon is similar to a Polyline in that it consists of a series of coordinates in an ordered sequence. However, polygons are designed to define regions within a closed loop.

Polygons are made of straight lines, and the shape is “closed” (all the lines connect up).

A polygon supports the following properties:

  • path – specifies several LatLng coordinates for the line (first and last coordinate are equal)
  • strokeColor – specifies a hexadecimal color for the line (format: “#FFFFFF”)
  • strokeOpacity – specifies the opacity of the line (a value between 0.0 and 1.0)
  • strokeWeight – specifies the weight of the line’s stroke in pixels
  • fillColor – specifies a hexadecimal color for the area within the enclosed region (format: “#FFFFFF”)
  • fillOpacity – specifies the opacity of the fill color (a value between 0.0 and 1.0)
  • editable – defines whether the line is editable by users (true/false)
예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – Circle

A circle supports the following properties:

  • center – specifies the google.maps.LatLng of the center of the circle
  • radius – specifies the radius of the circle, in meters
  • strokeColor – specifies a hexadecimal color for the line around the circle (format: “#FFFFFF”)
  • strokeOpacity – specifies the opacity of the stroke color (a value between 0.0 and 1.0)
  • strokeWeight – specifies the weight of the line’s stroke in pixels
  • fillColor – specifies a hexadecimal color for the area within the circle (format: “#FFFFFF”)
  • fillOpacity – specifies the opacity of the fill color (a value between 0.0 and 1.0)
  • editable – defines whether the circle is editable by users (true/false)
예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – InfoWindow

Show an InfoWindow with some text content for a marker:

예제

위 코드를 테스트하려면 클릭합니다 »

구글 맵 – Overlays Reference

Google Maps API Reference.

답글 남기기