Basic marker customization

The Advanced Markers API uses two classes to define markers: the AdvancedMarkerView class provides default marker functionality, and PinView contains options for further customization. This page shows you how to customize markers in the following ways:

Add title text
Scale the marker
Change the background color
Change the border color
Change the glyph color
Hide the glyph

A diagram showing the parts of an Advanced Marker. — **Figure 1**: The parts of an Advanced Marker.

Add title text

Title text appears when the cursor hovers over a marker. Title text is visible to screen readers. Use the AdvancedMarkerView.title option to add title text to a marker:

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

Scale the marker

Use the PinView.scale option to adjust the scale of a marker:

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

Change the background color

Use the PinView.background option to change the background color of a marker:

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

Change the border color

Use the PinView.borderColor option to change the border color of a marker:

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

Change the glyph color

Use the PinView.glyphColor option to change the glyph color of a marker:

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

Hide the glyph

Set the PinView.glyph option to an empty string to hide a marker's 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

Next steps:

Create markers with graphics