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

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