모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

기호

  1. 소개
  2. 기호의 속성
  3. 사전 지정된 기호
  4. 마커에 기호 추가
  5. 폴리라인에 기호 추가
  6. 기호 애니메이트

소개

기호는 마커에 벡터 기반 아이콘을 사용하거나 이미지에 폴리라인을 추가할 때 유용합니다.

Symbol은 벡터 기반 이미지로, Marker 또는 Polyline 객체에 표시할 수 있습니다. 기호의 모양은 SVG 경로 표기법을 사용하여 경로에 의해 정의됩니다. path는 유일한 필수 속성이지만 Symbol 객체는 스트로크와 채우기의 색상과 강도 등의 시각적 측면을 사용자 지정할 수 있는 다양한 속성을 지원합니다. 아래의 속성 목록을 참조하세요.

SymbolPath 클래스를 통해 여러 사전 지정된 기호를 사용할 수 있습니다. 아래의 목록을 참조하세요.

기호의 속성

Symbol의 기본 동작은 마커나 폴리라인 중 어디에 나타나는지에 따라 약간 달라집니다. 이러한 차이는 아래 속성 목록에 설명되어 있습니다.

Symbol은 다음 속성을 지원합니다.

  • path(필수)는 기호의 형태를 정의하는 경로입니다. google.maps.SymbolPath에서 사전 정의된 경로 중 하나를 사용하거나 SVG 경로 표기법을 사용하여 사용자 지정 경로를 정의할 수 있습니다. 참고: 폴리라인의 벡터 경로는 22x22px 정사각형 안에 맞춰져야 합니다. 경로에 이 정사각형 외부의 점이 포함된 경우, 기호의 scale 속성을 0.2 등의 분수 값으로 조정하여 배율이 조정된 최종 지점을 이 정사각형에 맞춰야 합니다.
  • anchor는 마커나 폴리라인에 대해 상대적으로 기호의 위치를 설정합니다. 기호의 경로 좌표는 앵커의 x와 y 좌표를 기준으로 각각 왼쪽과 위로 변환됩니다. 기본적으로, 기호는 (0, 0)에 고정됩니다. 이 위치는 기호의 경로와 동일한 좌표계로 표현됩니다.
  • fillColor는 기호의 채우기 색상입니다(즉, 스트로크로 둘러싸인 영역). 확장된 이름이 붙은 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 마커에 있는 기호의 경우, 기본값은 'black'입니다. 폴리라인에 있는 기호의 경우, 기본값은 해당 폴리라인의 스트로크 색상입니다.
  • fillOpacity는 기호의 채우기의 상대적 불투명도(즉, 투명도 부족)를 정의합니다. 이 값의 범위는 0.0(완전 투명)에서 1.0(완전 불투명) 사이입니다. 기본값은 0.0입니다.
  • rotation은 기호가 회전하는 각도로, 시계 방향으로 도 단위로 표현됩니다. 기본적으로, 기호 마커는 회전이 0이고, 폴리라인의 기호는 자신이 놓인 가장자리의 각도를 기준으로 회전됩니다. 폴리라인에서 기호의 회전을 설정하면, 기호의 회전이 고정되어 더 이상의 곡선을 따르지 않게 됩니다.
  • scale은 기호의 배율이 조정되는 크기를 설정합니다. 기호 마커 경우, 기본 배율은 1입니다. 어느 크기로든 기호의 배율을 설정할 수 있습니다. 폴리라인에 있는 기호의 경우, 기본 배율은 해당 폴리라인의 스트로크 두께입니다. 비율을 조정한 후, 기호는 기호의 앵커를 중심으로 하는 22x22px 정사각형 내에 있어야 합니다.
  • strokeColor는 기호의 윤곽선 색상입니다. 확장된 이름이 붙은 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 마커에 있는 기호의 경우, 기본값은 'black'입니다. 폴리라인에 있는 기호의 경우, 기본 색상은 해당 폴리라인의 스트로크 색상입니다.
  • strokeOpacity는 기호의 스트로크의 상대적 불투명도(즉, 투명도 부족)를 결정합니다. 이 값의 범위는 0.0(완전 투명)에서 1.0(완전 불투명) 사이입니다. 기호 마커의 경우, 기본값은 1.0입니다. 폴리라인에 있는 기호의 경우, 기본값은 해당 폴리라인의 스트로크 불투명도입니다.
  • strokeWeight는 기호의 윤곽선 두께를 정의합니다. 기본값은 기호의 scale입니다.

사전 지정된 기호

Google Maps JavaScript API는 SymbolPath 클래스를 통해 마커나 폴리라인에 추가할 수 있는 몇 가지 내장 기호를 제공합니다.

기본 기호에는 원과 두 가지 유형의 화살표가 포함됩니다. 앞/뒤를 가리키는 화살표를 모두 이용할 수 있습니다. 폴리라인에 있는 기호의 방향이 고정되어 있으므로, 폴리라인에서 특히 유용합니다. 앞은 폴리라인 종료 지점 방향으로 간주됩니다.

기본 기호 옵션을 사용하여 사전 지정된 기호의 스트로크나 채우기를 수정할 수 있습니다.

다음과 같은 사전 정의된 기호가 포함됩니다.

이름 설명 예시
google.maps.SymbolPath.CIRCLE 원.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW 사방이 막힌 뒤쪽을 가리키는 화살표.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW 사방이 막힌 앞쪽을 가리키는 화살표.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW 한쪽이 열린 뒤쪽을 가리키는 화살표.
google.maps.SymbolPath.FORWARD_OPEN_ARROW 한쪽이 열린 앞쪽을 가리키는 화살표.

마커에 기호 추가

마커에 벡터 기반 아이콘을 표시하려면 원하는 경로가 포함된 Symbol 객체 리터럴을 마커의 icon 속성에 전달합니다.

아래 예시는 사전 정의된 벡터 경로 중 하나를 사용하여 아이콘을 생성합니다.

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

예시 보기(marker-symbol-predefined).

다음 예시는 SVG 경로 표기법을 사용하여 마커의 사용자 지정 아이콘을 생성합니다.

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

예시 보기(marker-symbol-custom).

폴리라인에 기호 추가

폴리라인에 기호를 표시하려면 PolylineOptions 객체의 icons[] 속성을 설정합니다. icons[] 배열은 다음 속성이 포함된 하나 이상의 IconSequence 객체 리터럴을 취합니다.

  • icon(required)은 선에 렌더링할 기호입니다.
  • offset은 아이콘이 렌더링되는 선의 시작 지점에서부터의 거리를 결정합니다. 이 거리는 선의 길이 비율(예: '50%') 또는 픽셀(예: '50px')로 표현될 수 있습니다. 기본값은 '100%'입니다.
  • repeat는 선에서 연속적인 아이콘 간의 거리를 결정합니다. 이 거리는 선의 길이 비율(예: '50%') 또는 픽셀(예: '50px')로 표현될 수 있습니다. 아이콘의 반복을 비활성화하려면 '0'으로 지정합니다. 기본값은 '0'입니다.

기호와 PolylineOptions 클래스를 조합하면 지도에서 폴리라인 디자인의 많은 부분을 제어할 수 있습니다. 다음은 적용 가능한 사용자 지정의 몇 가지 예시입니다.

화살표

IconSequence.offset 속성을 사용하여 폴리라인의 시작 지점 또는 종료 지점에 화살표를 추가합니다.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

예시 보기(overlay-symbol-arrow).

점선

폴리라인의 불투명도를 0으로 설정하고, 선 위에 불투명한 기호를 규칙적인 간격으로 오버레이하는 방식으로 점선 효과를 나타낼 수 있습니다.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

예시 보기(overlay-symbol-dashed).

사용자 지정 경로

사용자 지정 기호를 사용하여 폴리라인에 다양한 셰이프를 추가할 수 있습니다.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

예시 보기(overlay-symbol-custom).

기호 애니메이트

DOM의 window.setInterval() 합수를 사용하여 기호의 오프셋을 고정된 간격으로 변경하는 방식으로, 경로를 따라 기호를 애니메이트할 수 있습니다.

// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

예시 보기(overlay-symbol-animate).

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.