@angular/google-maps 13.3.9 – Make marker have round shape and image


I need to add a custom marker into my map. All I want is for it to have a circle shape and an image inside, but I can’t get it to work. Code:

    <div class="map-container">
  <google-map width="100%" height="100%" [center]="center" [zoom]="zoom">
      *ngFor="let marker of markers"

And how I fill the markers:

        position: { lat: parseFloat(lat), lng: parseFloat(lon) },
        title: nombre,
        icon: {
          url: restaurant.imagenes[0]?.ruta_imagen,
          scaledSize: new google.maps.Size(size, size),
        } as google.maps.Icon,
        options: {
          draggable: false,
          shape: {
            coords: [size / 2, size / 2, size / 2],
            type: 'circle',
        } as google.maps.MarkerOptions,

As much as I try variations, all I get is a squared image. Can someone help? Thanks!


I did some digging and, using the angular-maps, you have no way to display a round image unless the image is already round.

Best I could get was using a custom SVG.

Answered By – MIPB

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published