📍 Advanced Markers

Jozef Soročin

Updated 07/13/2025

You've got a Google Map set up and want to place markers on it. You don't want to go with the default, red markers — you want your brand to stand out.

In this step-by-step guide we'll analyze four hands-on approaches and help you understand & implement advanced map markers.

Approach #1 — Image URLs (jpg, png, …)

Assuming you've initialized your map:

const myMap = new google.maps.Map({ ... });

you can now create your first custom marker by filling in the icon property :

const marker = new google.maps.Marker({
  map: myMap,
  position: {
    lat: 48.7277,
    lng: 21.2453,
  },
  icon: {
    url: "https://...",
  },
});

Google Maps will now take this image and render it in its original size.

If you need to downsize the image, eg. to 36 × 36px, you can use scaledSize :

const marker = new google.maps.Marker({
    ...
    icon: {
      url: '...',
      scaledSize: new google.maps.Size(36, 36),
    }
});

Depending on your image dimensions and shape, the marker placement may appear off. That's because, by default , “the anchor is located along the center point of the bottom of the image”.

Let's say you don't like this default behavior (left) and you'd want your custom marker fully centered (right):

You can use the anchor property to position the image to your liking:

const marker = new google.maps.Marker({
    ...
    icon: {
      url: '...',
      scaledSize: new google.maps.Size(36, 36),
      anchor: new google.maps.Point(18, 18),
    }
});

Note that Point(0,0) starts top-left and Point(imgWidth,imgHeight)ends bottom-right. To fully center your image, divide its dimensions in half — e.g. Point(18, 18) as in the case above.

Demo

Pros

Easy to set up & configure
Covers most use cases (store locator, branding, etc)

Cons

Limited to fixed image assets
No dynamic content
Risk of improper downsizing and thus pixelation

Approach #2 — Encoded SVGs as Data URLs

In Approach #2, it'd be technically possible to pass an SVG url (like this ) to the icon object.

SVGs are great for map use because they're vector-based — they scale well and, unlike with JPEGs or PNGs, you'll avoid pixelation.

But SVGs are also notoriously hard to understand. And edit. You'll need a tool like Figma to efficiently customize & export them.

Join 200+ developers who've mastered this! Get Complete Access — €19

Already a member? Sign in here