How to style editable circle controls in Google Maps

Question

Does anyone know of an easy way to style the user controls (white dots on the bouns of the radius) for the editable circles in Google Maps? I cant find any way of doing this in the API documentation. At the very least it would be great to have the dots on a lower zindex than my pin but modify the zindex options of both has no results.

Answer 1

I'm afraid you can't. The API provides no control over those handles, and since the circles live inside a canvas, there's no easy way to identify the element in order to style it.

Edit:

You can declare your circle as non-editable and allow edits only on mouseover.

var circle=new google.maps.Circle({ 
    center: map.getCenter(),
    map: map,
    editable: false
});

google.maps.event.addListener(circle, 'mouseover', function () {
    circle.set('editable',true);
});

google.maps.event.addListener(circle, 'mouseout', function () {
    circle.set('editable',false);
});