기본 마커 맞춤설정

3D 지도용 마커 API는 두 가지 클래스를 사용하여 마커를 정의합니다. 3DMarkerElement 클래스는 기본 매개변수 (position, label, map)를 제공하고 PinElement 클래스는 추가 맞춤설정을 위한 옵션을 제공합니다.

지도에 마커를 추가하려면 먼저 3DMarkerElement 및 PinElement 클래스를 제공하는 마커 라이브러리를 로드해야 합니다.

다음 스니펫은 새 PinElement를 만든 다음 마커에 적용하는 코드를 보여줍니다.

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

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

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

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

  markers[i].appendChild(pin.element);
}

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

마커 크기 조정

마커의 크기를 조정하려면 scale 옵션을 사용합니다.

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

배경 색상 변경

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

테두리 색상 변경

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

글리프 색상 변경

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

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

글리프에 텍스트 추가

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

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

고도 변경

Marker3DElement.altitudeMode 및 Marker3DElement.extruded와 함께 Marker3DElement.position.altitude 옵션을 사용하여 마커의 고도를 변경하고 지면과 마커 사이에 돌출된 선을 추가합니다.

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});

마커 삭제

Marker3DElement.remove()을 사용하여 지도에서 마커를 삭제합니다.

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

다음 단계