D
D
Dmitry Bay2017-09-25 14:05:19
Google Maps
Dmitry Bay, 2017-09-25 14:05:19

Round custom marker icon for Google Maps?

It is not possible to make a round icon-picture on Google maps. Icon in jpeg format, photo.
I'm already thinking about converting icons to png format for GM.
My icon is now formed by the following code:

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 the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry Bay, 2017-09-27
@kawabanga

Answer:
Initially, I made a mistake by trying to add a class to the icon, and not to the marker.

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);

Pay attention to optimized:false, this means that we will not draw on the canvas, but on the div.
As a result, the whole trick is in the last lines and adding id to the div markers.
And at the end in css add -
#markerLayer img {
                    border-radius:50%!important;
                    border: 0px solid black!important;

                }

My original mistake was that I was trying to add optimized: false to the icon, not the marker.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question