그래픽으로 마커 만들기

Advanced Markers API를 사용하면 기본 마커 아이콘을 맞춤 그래픽 이미지로 바꿀 수 있습니다. 글리프를 이미지 파일로 바꿀 수도 있습니다. 이 페이지에서는 다음 방법을 보여줍니다.

맞춤 그래픽 파일 사용
인라인 SVG 사용
그래픽 파일을 글리프로 사용
장소 아이콘 이미지를 글리프로 사용
아이콘 글꼴 사용

고급 마커는 PNG, JPEG, GIF, SVG, TIFF 등 모든 일반적인 이미지 파일 형식을 지원합니다.

맞춤 그래픽 파일 사용

그래픽 파일(예: PNG)을 참조하는 img 요소를 AdvancedMarkerView.content 옵션에 전달하여 맞춤 이미지를 사용하여 마커를 만들 수 있습니다.

TypeScript

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement('img');
beachFlagImg.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

const beachFlagMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.434, lng: -122.082 },
    content: beachFlagImg,
    title: 'A marker using a custom PNG Image',
});index.ts

자바스크립트

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement("img");

beachFlagImg.src =
  "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";

const beachFlagMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.434, lng: -122.082 },
  content: beachFlagImg,
  title: "A marker using a custom PNG Image",
});index.js

인라인 SVG 사용

인라인 SVG를 사용해야 하는 경우도 있습니다. SVG XML 요소를 AdvancedMarkerView.content 옵션에 전달하여 인라인 SVG 이미지를 사용하여 마커를 만들 수 있습니다.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString = '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="61" viewBox="0 0 92.3 132.3"><path fill="#1a73e8" d="M60.2 2.2C55.8.8 51 0 46.1 0 32 0 19.3 6.4 10.8 16.5l21.8 18.3L60.2 2.2z"/><path fill="#ea4335" d="M10.8 16.5C4.1 24.5 0 34.9 0 46.1c0 8.7 1.7 15.7 4.6 22l28-33.3-21.8-18.3z"/><path fill="#4285f4" d="M46.2 28.5c9.8 0 17.7 7.9 17.7 17.7 0 4.3-1.6 8.3-4.2 11.4 0 0 13.9-16.6 27.5-32.7-5.6-10.8-15.3-19-27-22.7L32.6 34.8c3.3-3.8 8.1-6.3 13.6-6.3"/><path fill="#fbbc04" d="M46.2 63.8c-9.8 0-17.7-7.9-17.7-17.7 0-4.3 1.5-8.3 4.1-11.3l-28 33.3c4.8 10.6 12.8 19.2 21 29.9l34.1-40.5c-3.3 3.9-8.1 6.3-13.5 6.3"/><path fill="#34a853" d="M59.1 109.2c15.4-24.1 33.3-35 33.3-63 0-7.7-1.9-14.9-5.2-21.3L25.6 98c2.6 3.4 5.3 7.3 7.9 11.3 9.4 14.5 6.8 23.1 12.8 23.1s3.4-8.7 12.8-23.2"/></svg>';
const pinSvgElement =
    parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement;

const pinSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.42475, lng: -122.094 },
    content: pinSvgElement,
    title: 'A marker using a custom SVG image.',
});index.ts

자바스크립트

const parser = new DOMParser();
// A marker with a custom inline SVG.
const pinSvgString =
  '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="61" viewBox="0 0 92.3 132.3"><path fill="#1a73e8" d="M60.2 2.2C55.8.8 51 0 46.1 0 32 0 19.3 6.4 10.8 16.5l21.8 18.3L60.2 2.2z"/><path fill="#ea4335" d="M10.8 16.5C4.1 24.5 0 34.9 0 46.1c0 8.7 1.7 15.7 4.6 22l28-33.3-21.8-18.3z"/><path fill="#4285f4" d="M46.2 28.5c9.8 0 17.7 7.9 17.7 17.7 0 4.3-1.6 8.3-4.2 11.4 0 0 13.9-16.6 27.5-32.7-5.6-10.8-15.3-19-27-22.7L32.6 34.8c3.3-3.8 8.1-6.3 13.6-6.3"/><path fill="#fbbc04" d="M46.2 63.8c-9.8 0-17.7-7.9-17.7-17.7 0-4.3 1.5-8.3 4.1-11.3l-28 33.3c4.8 10.6 12.8 19.2 21 29.9l34.1-40.5c-3.3 3.9-8.1 6.3-13.5 6.3"/><path fill="#34a853" d="M59.1 109.2c15.4-24.1 33.3-35 33.3-63 0-7.7-1.9-14.9-5.2-21.3L25.6 98c2.6 3.4 5.3 7.3 7.9 11.3 9.4 14.5 6.8 23.1 12.8 23.1s3.4-8.7 12.8-23.2"/></svg>';
const pinSvgElement = parser.parseFromString(
  pinSvgString,
  "image/svg+xml"
).documentElement;
const pinSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.42475, lng: -122.094 },
  content: pinSvgElement,
  title: "A marker using a custom SVG image.",
});index.js

그래픽 파일을 글리프로 사용

그래픽 파일 리소스 또는 인라인 SVG 리소스를 참조하는 img 요소를 PinView.glyph 옵션에 전달하여 기본 글리프를 바꿀 수 있습니다.

TypeScript

// A marker with a custom SVG glyph.
const glyphImg = document.createElement('img');
glyphImg.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/google_logo_g.svg';

const glyphSvgPinView = new google.maps.marker.PinView({
    glyph: glyphImg,
});

const glyphSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.425, lng: -122.07 },
    content: glyphSvgPinView.element,
    title: "A marker using a custom SVG for the glyph.",
});index.ts

자바스크립트

// A marker with a custom SVG glyph.
const glyphImg = document.createElement("img");

glyphImg.src =
  "https://developers.google.com/maps/documentation/javascript/examples/full/images/google_logo_g.svg";

const glyphSvgPinView = new google.maps.marker.PinView({
  glyph: glyphImg,
});
const glyphSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.425, lng: -122.07 },
  content: glyphSvgPinView.element,
  title: "A marker using a custom SVG for the glyph.",
});index.js

장소 아이콘을 글리프로 사용

장소 세부정보를 사용하면 마커에 적용할 수 있는 장소 아이콘과 배경 색상을 요청할 수 있습니다. place.icon_background_color를 PinView.background 옵션에 전달하고 place.icon_mask_base_uri를 사용하는 URL을 PinView.glyph에 전달하여 장소 데이터로 마커를 맞춤설정합니다. .png 또는 .svg 파일 형식 확장자를 URI에 추가합니다. place.geometry.location을 사용하여 마커를 올바른 위치에 배치합니다. 또한 이 예에서는 마커 제목에 place.name을 표시합니다.

TypeScript

// A marker customized using a place icon and color, name, and geometry.
const request = {
    placeId: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
    fields: ['geometry', 'name', 'icon_mask_base_uri', 'icon_background_color'],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK &&
        place &&
        place.geometry &&
        place.geometry.location) {

        const pinView = new google.maps.marker.PinView({
            background: place.icon_background_color,
            glyph: new URL(place.icon_mask_base_uri + '.png'),
        });

        const placeIconMarkerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.geometry.location,
            content: pinView.element,
            title: place.name,
        });
    }
});index.ts

자바스크립트

// A marker customized using a place icon and color, name, and geometry.
const request = {
  placeId: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
  fields: ["geometry", "name", "icon_mask_base_uri", "icon_background_color"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    const pinView = new google.maps.marker.PinView({
      background: place.icon_background_color,
      glyph: new URL(place.icon_mask_base_uri + ".png"),
    });
    const placeIconMarkerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.geometry.location,
      content: pinView.element,
      title: place.name,
    });
  }
});
index.js

아이콘 글꼴 사용

아이콘 이름 및 스타일을 HTML <i> 태그에 CSS 클래스로 추가하고 <div> 태그에 추가하여 Font Awesome과 같은 아이콘 글꼴을 마커와 함께 사용할 수 있습니다. 다음 예에서는 아이콘이 글리프를 바꾸는 데 사용됩니다.

TypeScript

// A marker using a Font Awesome icon for the glyph.
const icon = document.createElement('div');
icon.innerHTML = '<i class="fa fa-pizza-slice fa-lg"></i>';
const faPinView = new google.maps.marker.PinView({
    glyph: icon,
    glyphColor: '#ff8300',
    background: '#FFD514',
    borderColor: '#ff8300',
});

const faMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.412, lng: -122.095829650878 },
    content: faPinView.element,
    title: 'A marker using a FontAwesome icon for the glyph.'
});index.ts

자바스크립트

// A marker using a Font Awesome icon for the glyph.
const icon = document.createElement("div");

icon.innerHTML = '<i class="fa fa-pizza-slice fa-lg"></i>';

const faPinView = new google.maps.marker.PinView({
  glyph: icon,
  glyphColor: "#ff8300",
  background: "#FFD514",
  borderColor: "#ff8300",
});
const faMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.412, lng: -122.095829650878 },
  content: faPinView.element,
  title: "A marker using a FontAwesome icon for the glyph.",
});index.js

이전 예에서는 필수 Font Awesome 스크립트가 HTML 파일의 script 요소를 통해 로드되었습니다.

<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>

다음 단계

맞춤 HTML로 마커 만들기