マーカーの基本的なカスタマイズ

Advanced Markers API は、2 つのクラスによってマーカーを定義します。マーカーのデフォルト機能を提供する AdvancedMarkerView クラスと、さらなるカスタマイズ用のオプションを含む PinView クラスです。このページでは、マーカーを次のようにカスタマイズする方法を解説します。

  • タイトル テキストを追加する
  • マーカーのスケールを調整する
  • 背景色を変更する
  • 輪郭線の色を変更する
  • グリフの色を変更する
  • グリフを非表示にする
高度なマーカーの構成要素を示した図。
図 1: 高度なマーカーの構成要素

タイトル テキストを追加する

タイトル テキストは、マーカーにカーソルを合わせた際に表示されます。また、スクリーン リーダーの読み取り対象です。マーカーにタイトル テキストを追加するには、次の例のように AdvancedMarkerView.title オプションを使用します。

TypeScript

// Default marker with title text (no PinView).
const markerViewWithText = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts

JavaScript

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

マーカーのスケールを調整する

マーカーのスケールを調整するには、PinView.scale オプションを使用します。

TypeScript

// Adjust the scale.
const pinViewScaled = new google.maps.marker.PinView({
    scale: 1.5,
});
const markerViewScaled = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinViewScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinViewScaled = new google.maps.marker.PinView({
  scale: 1.5,
});
const markerViewScaled = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinViewScaled.element,
});
index.js

背景色を変更する

マーカーの背景色を変更するには、PinView.background オプションを使用します。

TypeScript

// Change the background color.
const pinViewBackground = new google.maps.marker.PinView({
    background: '#FBBC04',
});
const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinViewBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinViewBackground = new google.maps.marker.PinView({
  background: "#FBBC04",
});
const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinViewBackground.element,
});
index.js

輪郭線の色を変更する

マーカーの輪郭線の色を変更するには、PinView.borderColor オプションを使用します。

TypeScript

// Change the border color.
const pinViewBorder = new google.maps.marker.PinView({
    borderColor: '#137333',
});
const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinViewBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinViewBorder = new google.maps.marker.PinView({
  borderColor: "#137333",
});
const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinViewBorder.element,
});
index.js

グリフの色を変更する

マーカーのグリフの色を変更するには、PinView.glyphColor オプションを使用します。

TypeScript

// Change the glyph color.
const pinViewGlyph = new google.maps.marker.PinView({
    glyphColor: 'white',
});
const markerViewGlyph = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinViewGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinViewGlyph = new google.maps.marker.PinView({
  glyphColor: "white",
});
const markerViewGlyph = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinViewGlyph.element,
});
index.js

グリフを非表示にする

マーカーのグリフを非表示にするには、PinView.glyph オプションを空の文字列に設定します。

TypeScript

// Hide the glyph.
const pinViewNoGlyph = new google.maps.marker.PinView({
    glyph: '',
});
const markerViewNoGlyph = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinViewNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinViewNoGlyph = new google.maps.marker.PinView({
  glyph: "",
});
const markerViewNoGlyph = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinViewNoGlyph.element,
});
index.js

次のステップ: