Круглая кастомная иконка маркера у Google Maps?

Question

[Dmitry Bay]

Не получается сделать круглую иконку-картинку на Google maps. Иконка в jpeg формате, фотография.

Уже думаю по поводу того, чтобы перевести иконки в png формат для GM.

У меня иконка сейчас формируется следующим кодом:

var ic = { //icon
            url: icon, // url
            scaledSize: new google.maps.Size(30, 30), // scaled size
            origin: new google.maps.Point(0,0), // origin
            anchor: new google.maps.Point(0, 0), // anchor
            //define the shape
            //define the shape
            shape:{coords:[17,17,18],type:'circle'},
            //set optimized to false otherwise the marker  will be rendered via canvas
            //and is not accessible via CSS
            optimized:false

        };

        var marker = new google.maps.Marker({
            map: map, title: name , position: latlngset, icon: ic
        });

Answer 1

[Dmitry Bay]

Отвечаю:

Изначально я допустил ошибку, пытаясь добавить класс с иконке, а не к маркеру.

var ic = { //icon
            url: icon, // url
            scaledSize: new google.maps.Size(30, 30), // scaled size
            origin: new google.maps.Point(0,0), // origin
            anchor: new google.maps.Point(0, 0), // anchor
            //define the shape


            shape:{coords:[17,17,18],type:'circle'},
            //set optimized to false otherwise the marker  will be rendered via canvas
            //and is not accessible via CSS
            optimized:false,
           

        };
 var marker = new google.maps.Marker({
            map: map, title: name , position: latlngset, icon: ic,
            optimized: false
        });

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

Обратите внимание на optimized:false, это означает, что рисовать мы будем не в canvas, а в div.
В итоге вся фишка в последних строчках и добавлении id к div маркеров.

И в конце в css добавляем -

#markerLayer img {
                    border-radius:50%!important;
                    border: 0px solid black!important;

                }

Моя изначальная ошибка была в том, что я пытался добавить optimized: false к иконке, а не к маркеру.