고급 마커는 두 가지 클래스를 사용하여 마커를 정의합니다.
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);
}
이 페이지에서는 다음과 같은 방법으로 마커를 맞춤설정하는 방법을 설명합니다.
![고급 마커의 요소를 보여주는 다이어그램](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=0000&hl=ko)
제목 텍스트 추가
커서를 마커 위로 가져가면 제목 텍스트가 표시됩니다. 제목 텍스트는 스크린 리더에서 읽을 수 있습니다.
프로그래매틱 방식으로 제목 텍스트를 추가하려면 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", });
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>
마커 크기 조정
마커의 크기를 조정하려면 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, });
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, });
배경 색상 변경
마커의 배경 색상을 변경하려면 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, });
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, });
테두리 색상 변경
마커의 테두리 색상을 변경하려면 PinElement.borderColor
옵션을 사용합니다.
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
글리프 색상 변경
마커의 글리프 색상을 변경하려면 PinElement.glyphColor
옵션을 사용합니다.
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
글리프 숨기기
마커의 글리프를 숨기려면 PinElement.glyph
옵션을 빈 문자열로 설정합니다.
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
또는 PinElement.glyphColor
를 PinElement.background
와 같은 값으로 설정합니다.
이렇게 하면 글리프를 시각적으로 숨기는 효과가 있습니다.