change custom marker shape google maps api

Question

I'm working on an app that uses google maps to show users location, each user is a marker on the page with his picture.

The user picture shape is square and I want to change it to circle without changing its original shape.

does anyone know if its possible through google maps API?

here is what I made so far:

The code that's creating the marker is the following:

let userLatLng = {lat: coordinates[0], lng: coordinates[1]};
    let icon = {
        url: Config.s3Address + profileImg,
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 0),
        scaledSize: new google.maps.Size(50, 50)
    };
    let shape = {
        coords: [0, 0, 60],
        type: 'circle'
    };
    let marker = new google.maps.Marker({
        map: this.map,
        clickable: true,
        animation: google.maps.Animation.DROP,
        position: userLatLng,
        icon: icon,
        shape: shape
    });

    let content = "<h4>" + userName + "</h4>";
    this.addInfoWindow(marker, content);

Thanks for all the helpers !! :)

Answer 1

The user picture size is 50, right? the origin point is left top 0, so maybe like this:

let shape = {
    coords: [25, 25, 25],
    type: 'circle'
};

More info here .