Personalizzazione di base dell'indicatore

Gli indicatori avanzati utilizzano due classi per definire gli indicatori: La classe AdvancedMarkerElement fornisce i parametri di base (position, title e map) e il corso PinElement contiene opzioni per ulteriori personalizzazione. Il seguente snippet mostra il codice per creare un nuovo PinElement, e poi applicarla a un indicatore.

// 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,
});

Nelle mappe create con HTML, i parametri di base di un indicatore sono dichiarati utilizzando l'elemento HTML gmp-advanced-marker; qualsiasi personalizzazione che utilizza Il corso PinElement deve essere applicato in modo programmatico. Per farlo, il codice deve recupera gli elementi gmp-advanced-marker dalla pagina HTML. Le seguenti lo snippet mostra il codice su cui eseguire query per una raccolta di elementi gmp-advanced-marker, e ripeti i risultati per applicare la personalizzazione dichiarata 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);
}

In questa pagina viene illustrato come personalizzare gli indicatori nei seguenti modi:

• Aggiungere il testo del titolo
• Ridimensiona l'indicatore
• Cambiare il colore di sfondo
• Cambiare il colore del bordo
• Cambiare il colore del glifo
• Utilizzare testo in un glifo
• Nascondi il glifo

Aggiungi il testo del titolo

Il testo del titolo viene visualizzato quando il cursore passa sopra un indicatore. Il testo del titolo è leggibile per screen reader.

Per aggiungere il testo del titolo in modo programmatico, utilizza l'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",
});
index.js

Per aggiungere il testo del titolo a un indicatore creato con HTML, utilizza l'attributo 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

Ridimensiona l'indicatore

Per ridimensionare un indicatore, utilizza l'opzione scale.

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

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

Modificare il colore dello sfondo

Utilizza l'opzione PinElement.background per modificare il colore di sfondo di un indicatore:

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

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

Modificare il colore del bordo

Utilizza l'opzione PinElement.borderColor per modificare il colore del bordo di una indicatore:

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    content: pinBorder.element,
});
index.ts

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
  content: pinBorder.element,
});
index.js

Cambia il colore del glifo

Utilizza l'opzione PinElement.glyphColor per modificare il colore del glifo di un indicatore:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});
index.ts

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
  content: pinGlyph.element,
});
index.js

Aggiungere testo a un glifo

Usa l'opzione PinElement.glyph per sostituire il glifo predefinito con un testo . Il glifo di testo del PinElement viene scalato con i PinElement e il suo colore predefinito corrisponde al valore predefinito di glyphColor di PinElement.

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

Nascondi il glifo

Imposta l'opzione PinElement.glyph su una stringa vuota per nascondere il glifo di un indicatore:

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

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

In alternativa, imposta PinElement.glyphColor sullo stesso valore di PinElement.background. In questo modo, nasconde visivamente il glifo.

Passaggi successivi:

• Creare indicatori con le immagini