自訂基本標記

選取平台： 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 選項：

  
  
  
  
  
  

  

     
TypeScript
      
// 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.ts
    

      注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。
    
    

    
JavaScript
      
  
  
  
 
// 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
    

      注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。
    
    

    
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
    

      注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。
    
    

    
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.03 },
    content: pinBorder.element,
});
index.ts
    

      注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。
    
    

    
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,
});
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.02 },
    content: pinGlyph.element,
});
index.ts
    

      注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。
    
    

    
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,
});
index.js
    


隱藏字符

將 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,
});
index.ts
    

      注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。
    
    

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


或者，您也可以將 PinElement.glyphColor 設為使用 PinElement.background 的值。
這在視覺上有隱藏字符的效果。

後續步驟：


使用圖形建立標記