0

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">
    <map-marker
      *ngFor="let marker of markers"
      [position]="marker.position"
      [options]="marker.options"
      [title]="marker.title"
    ></map-marker>
  </google-map>
</div>

And how I fill the markers:

this.markers.push({
        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!

MIPB
  • 1,770
  • 2
  • 12
  • 21
  • I don't know why this would give you a square, but `[size / 2, size / 2, size / 2]` seems wrong. The docs say: "coords is [x1,y1,r] where x1,y2 are the coordinates of the center of the circle, and r is the radius of the circle". You're passing a radius for the x and y coords. – Carcigenicate Jun 18 '23 at 15:23
  • I also tried: coords: [parseFloat(lat), parseFloat(lon), size / 2], same squared image. I don't know if the shape is actually doing anything. Edit: Shape is only for the shape of an area in the map, no the marker itself. – MIPB Jun 18 '23 at 15:28

1 Answers1

0

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.

MIPB
  • 1,770
  • 2
  • 12
  • 21