📍 Advanced Markers

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.

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.

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.

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

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