The first point of the line is the center of a circle, le second point
is draggable and will be the radius after clicking.
During the drag, I want to display the length of the line.
var ib;
var traceOptions = {
content: "000m",
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-40, 0),
zIndex: null,
boxStyle: { border: "1px solid black", opacity: 0.75, width:
"40px" },
closeBoxMargin: "",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
...
g.event.addListener(map, 'mousemove', function(event)
{ traceLine(event.latLng)});
...
function traceLine(point)
{
if (radius)
{
radius.setMap(null);
traceMarker.setMap(null);
ib.close();
}
radius= new g.Polyline({
path:[center,point],
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 1});
radius.setMap(map);
traceMarker = new g.Marker({
map: map,
draggable: true,
position: point,
visible: true
});
ib = new InfoBox(traceOptions);
lengthLine =
g.geometry.spherical.computeDistanceBetween(center,point);
ib.content = lengthLine.toString();
//ib.setPosition(); put the labelbox in the middle of the
line, later.
ib.open(map, traceMarker);
g.event.addListener(radius, 'click', function(event)
{fixRadius(event.latLng)});
}
...