기본 마커 맞춤설정

플랫폼 선택: Android iOS JavaScript

고급 마커는 두 가지 클래스를 사용하여 마커를 정의합니다. AdvancedMarkerElement 클래스는 기본 매개변수 (position, title, map)를 포함하고 PinElement 클래스에는 추가 기능을 위한 옵션이 포함되어 있습니다. 맞춤설정할 수 있습니다. 다음 스니펫은 새 PinElement를 만든 다음 마커에 적용하는 코드를 보여줍니다.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

HTML을 사용하여 만든 지도에서 마커의 기본 매개변수는 gmp-advanced-marker HTML 요소 모든 맞춤설정이 PinElement 클래스는 프로그래매틱 방식으로 적용해야 합니다. 이렇게 하려면 코드가 HTML 페이지에서 gmp-advanced-marker 요소를 가져옵니다. 다음 스니펫은 gmp-advanced-marker 요소 모음을 쿼리한 다음 결과를 반복하여 PinElement에 선언된 맞춤설정을 적용하는 코드를 보여줍니다.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

이 페이지에서는 다음과 같은 방법으로 마커를 맞춤설정하는 방법을 설명합니다.

• 제목 텍스트 추가
• 마커 크기 조정
• 배경 색상 변경
• 테두리 색상 변경하기
• 글리프 색상 변경
• 글리프에 텍스트 사용
• 글리프 숨기기

그림 1: 고급 마커의 요소

제목 텍스트 추가

커서를 마커 위로 가져가면 제목 텍스트가 표시됩니다. 제목 텍스트는 스크린 리더에서 읽을 수 있습니다.

프로그래매틱 방식으로 제목 텍스트를 추가하려면 AdvancedMarkerElement.title 옵션을 사용합니다.

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

HTML을 사용하여 만든 마커에 제목 텍스트를 추가하려면 title 속성을 사용합니다.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

마커 크기 조정

마커의 크기를 조정하려면 scale 옵션을 사용하세요.

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

배경 색상 변경

마커의 배경 색상을 변경하려면 PinElement.background 옵션을 사용합니다.

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

테두리 색상 변경

마커의 테두리 색상을 변경하려면 PinElement.borderColor 옵션을 사용합니다.

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    content: pinBorder.element,
});
index.ts

드림 <ph type="x-smartling-placeholder">

</ph> 참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
  content: pinBorder.element,
});
index.js

글리프 색상 변경

마커의 글리프 색상을 변경하려면 PinElement.glyphColor 옵션을 사용합니다.

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});
index.ts

드림 <ph type="x-smartling-placeholder">

</ph> 참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

자바스크립트

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
  content: pinGlyph.element,
});
index.js

글리프에 텍스트 추가

PinElement.glyph 옵션을 사용하여 기본 글리프를 텍스트 문자로 바꿉니다. PinElement의 텍스트 글리프는 PinElement와 함께 크기가 조정되며 기본 색상은 PinElement의 기본 glyphColor와 일치합니다.

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

드림 <ph type="x-smartling-placeholder">

</ph> 참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

글리프 숨기기

마커의 글리프를 숨기려면 PinElement.glyph 옵션을 빈 문자열로 설정합니다.

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    content: pinNoGlyph.element,
});
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.005 },
  content: pinNoGlyph.element,
});
index.js

또는 PinElement.glyphColor를 PinElement.background와 같은 값으로 설정합니다. 이렇게 하면 글리프를 시각적으로 숨기는 효과가 있습니다.

다음 단계:

• 그래픽으로 마커 만들기