0

I have photos on the server:

  • different sizes
  • in a square

I would like to load them as a Marker, but I would like a photo in a circle

Below I have a code that loads the photo as a Marker, scales well but I don't know how to get the circular photo effect.

There is no specific and good solution on the Internet, and if something is, the entries are from several years ago.

const profileImage = {
  url:"@Model.LogoPath",
  scaledSize: new google.maps.Size(50, 50)
};

userLocationMarker = new google.maps.Marker({
  position: myLatLng,
  map,
  title: "Start",
  icon: profileImage
});
DeveloperApps
  • 763
  • 7
  • 16
  • Duplicate of [Google map custom marker with css rounded corner](https://stackoverflow.com/questions/25367542/google-map-custom-marker-with-css-rounded-corner) – MrUpsidown Apr 06 '21 at 21:23
  • @MrUpsidown This is not a duplicate. The solution link you provided is from 7 years ago and is not working. And it's not about rounding a photo from a URL. – DeveloperApps Apr 06 '21 at 22:01
  • 1) It works 2) It's no different than your question (and answer) as it makes use of the OverlayView and explains how to use it 3) I marked it too as a duplicate of [another question](https://stackoverflow.com/questions/46416883/how-add-circle-shape-in-google-maps-custom-icon) which has a working stack snippet for you to see and 4) both answers are for the same api version 3 that you are using 7 years later. – MrUpsidown Apr 06 '21 at 22:07

1 Answers1

1

I was able to find a solution:

  1. Turn off optimization in Marker

    optimized: false

  2. Add a layer with an image

    var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function () {
    this.getPanes().markerLayer.id = 'myMarker';
};
myoverlay.setMap(map);

  3. Add style to your image

    #myMarker img {
border-radius: 100px;
border: 2px solid rgba(255,255,255, 0.1);
}

All code:

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        fullscreenControl: false,
        streetViewControl: false,
        disableDefaultUI: true,
        styles: CustomMapStyles
    });

    const myLatLng;

    const profileImage = {
        url:"http://qwerty.jpg",
        scaledSize: new google.maps.Size(50, 50)
    };

    userLocationMarker = new google.maps.Marker({
        position: myLatLng,
        map,
        title: "MyMarker",
        optimized: false,
        icon: profileImage
    });

    var myoverlay = new google.maps.OverlayView();
    myoverlay.draw = function () {
        this.getPanes().markerLayer.id = 'myMarker';
    };
    myoverlay.setMap(map);
}



#myMarker img {
    border-radius: 100px;
    border: 2px solid rgba(255,255,255, 0.1);
}
DeveloperApps
  • 763
  • 7
  • 16