Create markers with graphics

Stay organized with collections Save and categorize content based on your preferences.

The Advanced Markers API supports replacing the default marker icon with a custom graphic image. You can also replace the glyph with an image file. This page shows you how to:

Advanced Markers supports all common image file types, including PNG, JPEG, GIF, SVG, and TIFF.

Use a custom graphic file

Create a marker using a custom image by passing an img element referencing a graphic file (for example PNG), to theAdvancedMarkerView.content option:

TypeScript

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement('img');
beachFlagImg.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

const beachFlagMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.434, lng: -122.082 },
    content: beachFlagImg,
    title: 'A marker using a custom PNG Image',
});
index.ts

JavaScript

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement("img");

beachFlagImg.src =
  "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";

const beachFlagMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.434, lng: -122.082 },
  content: beachFlagImg,
  title: "A marker using a custom PNG Image",
});
index.js

Use an inline SVG

Some scenarios may call for the use of an inline SVG. Create a marker using an inline SVG image by passing an SVG XML element to the AdvancedMarkerView.content option:

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString = '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="61" viewBox="0 0 92.3 132.3"><path fill="#1a73e8" d="M60.2 2.2C55.8.8 51 0 46.1 0 32 0 19.3 6.4 10.8 16.5l21.8 18.3L60.2 2.2z"/><path fill="#ea4335" d="M10.8 16.5C4.1 24.5 0 34.9 0 46.1c0 8.7 1.7 15.7 4.6 22l28-33.3-21.8-18.3z"/><path fill="#4285f4" d="M46.2 28.5c9.8 0 17.7 7.9 17.7 17.7 0 4.3-1.6 8.3-4.2 11.4 0 0 13.9-16.6 27.5-32.7-5.6-10.8-15.3-19-27-22.7L32.6 34.8c3.3-3.8 8.1-6.3 13.6-6.3"/><path fill="#fbbc04" d="M46.2 63.8c-9.8 0-17.7-7.9-17.7-17.7 0-4.3 1.5-8.3 4.1-11.3l-28 33.3c4.8 10.6 12.8 19.2 21 29.9l34.1-40.5c-3.3 3.9-8.1 6.3-13.5 6.3"/><path fill="#34a853" d="M59.1 109.2c15.4-24.1 33.3-35 33.3-63 0-7.7-1.9-14.9-5.2-21.3L25.6 98c2.6 3.4 5.3 7.3 7.9 11.3 9.4 14.5 6.8 23.1 12.8 23.1s3.4-8.7 12.8-23.2"/></svg>';
const pinSvgElement =
    parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement;

const pinSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.42475, lng: -122.094 },
    content: pinSvgElement,
    title: 'A marker using a custom SVG image.',
});
index.ts

JavaScript

const parser = new DOMParser();
// A marker with a custom inline SVG.
const pinSvgString =
  '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="61" viewBox="0 0 92.3 132.3"><path fill="#1a73e8" d="M60.2 2.2C55.8.8 51 0 46.1 0 32 0 19.3 6.4 10.8 16.5l21.8 18.3L60.2 2.2z"/><path fill="#ea4335" d="M10.8 16.5C4.1 24.5 0 34.9 0 46.1c0 8.7 1.7 15.7 4.6 22l28-33.3-21.8-18.3z"/><path fill="#4285f4" d="M46.2 28.5c9.8 0 17.7 7.9 17.7 17.7 0 4.3-1.6 8.3-4.2 11.4 0 0 13.9-16.6 27.5-32.7-5.6-10.8-15.3-19-27-22.7L32.6 34.8c3.3-3.8 8.1-6.3 13.6-6.3"/><path fill="#fbbc04" d="M46.2 63.8c-9.8 0-17.7-7.9-17.7-17.7 0-4.3 1.5-8.3 4.1-11.3l-28 33.3c4.8 10.6 12.8 19.2 21 29.9l34.1-40.5c-3.3 3.9-8.1 6.3-13.5 6.3"/><path fill="#34a853" d="M59.1 109.2c15.4-24.1 33.3-35 33.3-63 0-7.7-1.9-14.9-5.2-21.3L25.6 98c2.6 3.4 5.3 7.3 7.9 11.3 9.4 14.5 6.8 23.1 12.8 23.1s3.4-8.7 12.8-23.2"/></svg>';
const pinSvgElement = parser.parseFromString(
  pinSvgString,
  "image/svg+xml"
).documentElement;
const pinSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.42475, lng: -122.094 },
  content: pinSvgElement,
  title: "A marker using a custom SVG image.",
});
index.js

Use a graphic file as the glyph

Replace the default glyph by passing an img element referencing a graphic file resource, or an inline SVG resource, to the PinView.glyph option:

TypeScript

// A marker with a custom SVG glyph.
const glyphImg = document.createElement('img');
glyphImg.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/google_logo_g.svg';

const glyphSvgPinView = new google.maps.marker.PinView({
    glyph: glyphImg,
});

const glyphSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.425, lng: -122.07 },
    content: glyphSvgPinView.element,
    title: "A marker using a custom SVG for the glyph.",
});
index.ts

JavaScript

// A marker with a custom SVG glyph.
const glyphImg = document.createElement("img");

glyphImg.src =
  "https://developers.google.com/maps/documentation/javascript/examples/full/images/google_logo_g.svg";

const glyphSvgPinView = new google.maps.marker.PinView({
  glyph: glyphImg,
});
const glyphSvgMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.425, lng: -122.07 },
  content: glyphSvgPinView.element,
  title: "A marker using a custom SVG for the glyph.",
});
index.js

Use a place icon as the glyph

With Place Details, you can request a place icon and background color, which you can apply to markers. Customize a marker using place data by passing place.icon_background_color to the PinView.background option, and a URL using place.icon_mask_base_uri to PinView.glyph. Append the .png or .svg file type extension to the URI. Use place.geometry.location to place the marker in the correct location. This example also displays the place.name in the marker title.

TypeScript

// A marker customized using a place icon and color, name, and geometry.
const request = {
    placeId: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
    fields: ['geometry', 'name', 'icon_mask_base_uri', 'icon_background_color'],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK &&
        place &&
        place.geometry &&
        place.geometry.location) {

        const pinView = new google.maps.marker.PinView({
            background: place.icon_background_color,
            glyph: new URL(place.icon_mask_base_uri + '.png'),
        });

        const placeIconMarkerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.geometry.location,
            content: pinView.element,
            title: place.name,
        });
    }
});
index.ts

JavaScript

// A marker customized using a place icon and color, name, and geometry.
const request = {
  placeId: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
  fields: ["geometry", "name", "icon_mask_base_uri", "icon_background_color"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    const pinView = new google.maps.marker.PinView({
      background: place.icon_background_color,
      glyph: new URL(place.icon_mask_base_uri + ".png"),
    });
    const placeIconMarkerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.geometry.location,
      content: pinView.element,
      title: place.name,
    });
  }
});

index.js

Use icon fonts

Use icon fonts, such as Font Awesome, with markers by adding the icon name and style as CSS classes to an HTML <i> tag, and adding that to a <div> tag. In the following example the icon is used to replace the glyph:

TypeScript

// A marker using a Font Awesome icon for the glyph.
const icon = document.createElement('div');
icon.innerHTML = '<i class="fa fa-pizza-slice fa-lg"></i>';
const faPinView = new google.maps.marker.PinView({
    glyph: icon,
    glyphColor: '#ff8300',
    background: '#FFD514',
    borderColor: '#ff8300',
});

const faMarkerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.412, lng: -122.095829650878 },
    content: faPinView.element,
    title: 'A marker using a FontAwesome icon for the glyph.'
});
index.ts

JavaScript

// A marker using a Font Awesome icon for the glyph.
const icon = document.createElement("div");

icon.innerHTML = '<i class="fa fa-pizza-slice fa-lg"></i>';

const faPinView = new google.maps.marker.PinView({
  glyph: icon,
  glyphColor: "#ff8300",
  background: "#FFD514",
  borderColor: "#ff8300",
});
const faMarkerView = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.412, lng: -122.095829650878 },
  content: faPinView.element,
  title: "A marker using a FontAwesome icon for the glyph.",
});
index.js

In the previous example, the required Font Awesome script has been loaded via the script element of the HTML file:

<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>

Next steps

Create markers with custom HTML