how to create a Polyline in google map v3 , and make it enableDrawing..

Question

this code is in v2:

var polyline = new GPolyline([point1,point2], "#ff0000", 5);
map.addOverlay(polyline);
polyline.enableDrawing();

and how to do in v3 ??

thanks

Answer 1

Unfortunately enableDrawing/enableEditing aren't supported by v3. There's a feature request for it in bugtracker.

It is possible to implement it by yourself (see this demo for example), but doing it as well as in v2 is not trivial.

I'm currently looking for a solution to this problem by myself. So far I've found only one implementation that looks at least a bit promising: Polyline-enableEditing-enableDrawing-for-GMaps-API-v3.

Answer 2

It was a pain to implement, but it is possible. I used a state pattern to track the digitization process. I used EXT JS, so I am trying to include things that are strictly javascript. On a button click, the digitizing object would track, whether I was DIGITIZING or NOT_DIGITIZING or EDITING. The state would also track which geometry type I needed to handle: POINT, POLYLINE, POLYGON. Buttons were available to set the state. I would capture the map clicks with:

google.maps.event.addListener(map,"click",digitizer.onDigitize.createDelegate(digitizer));
google.maps.event.addListener(map,"dblclick",digitizer.endDigitize.createDelegate(digitizer));

Within the digitizer object, I tracked the digitizing polygon and points. Whenever the user clicked, I would send the latLng within the event to the tracked object.

this.digitizedGeometry.getPath().push(e.latLng);

This would both work for polyline and polygon. I only tracked simple topology, not donuts or multiple geometries for this.

The editing and deletion of points was more difficult.

First I had to track whether the user selected a geometry of which was a POLYLINE or POLYGON and place this geometry in editGeometry variable within digitizer, and enabled the button for editing.

I cycled through the edit geometry's path, and added markers and midpoint markers with different styles ensuring that the markers are draggable.

var path = this.editGeometry.getPath();
for (var i = 0; i < path.getLength(); i++) {
    // Add point geometry markers
    var point = path.getAt(i);
    var latLng = new google.maps.LatLng(point.lat(), point.lng());
    var markerOptions = {position: latLng, map: mapPanel.getMap()};
    Ext.apply(markerOptions, digitizer.markerStyle);
    var marker = new google.maps.Marker(markerOptions);

    // Used to track the latLng associated with the marker when position changes.
    marker.edit = {
        path: path,
        position: i,
        isMidpoint: false
    };
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true));
    google.maps.event.addListener(marker, "rightclick", digitizer.onContextMenu.createDelegate(mapPanel, marker, true));
    digitizer.editHandles.push(marker);

    // determine the midpoint
    var nextValue = (i+1) % path.getLength();
    var otherPoint = path.getAt(nextValue);

    var latLng = new google.maps.LatLng((point.lat() + otherPoint.lat()) / 2.0, (point.lng() + otherPoint.lng()) / 2.0);
    var markerOptions = {position: latLng, map: mapPanel.getMap()};
    Ext.apply(markerOptions, digitizer.midpointMarkerStyle);
    var marker = new google.maps.Marker(markerOptions);

    marker.edit = {
        path: path,
        position: i,
        isMidpoint: true
    };
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true));
    digitizer.editHandles.push(marker);   
}

The key part is "dragend", and applying the edit. If it was an actual point within the path, I would move the point and redetermine the midpoints.

marker.edit.path.setAt(marker.edit.position, e.latLng);

// Adjust midpoints
var index = handles.indexOf(marker);
var prev = (index - 2 + handles.length) % handles.length;
var mpprev = (index - 1 + handles.length) % handles.length;
var next = (index + 2) % handles.length;
var mpnext = (index + 1) % handles.length;
var prevMarker = handles[prev];
var nextMarker = handles[next];
var prevMpMarker = handles[mpprev];
var nextMpMarker = handles[mpnext];
prevMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + prevMarker.getPosition().lat()) / 2.0, (e.latLng.lng() + prevMarker.getPosition().lng()) / 2.0));
nextMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + nextMarker.getPosition().lat()) / 2.0, (e.latLng.lng() + nextMarker.getPosition()

You can see how this is very involved. If you don't want the midpoints, then the first line on the above code is sufficient. Applying the midpoints is more involved. You have to append the midpoint to the path, and shift all positions, and add a new midpoint and adjust the previous midpoint. If I wanted to delete a point, I would have to remove that point, decrement the positions of the handles, delete a midpoint and readjust the previous midpoint.

Hopefully, this will have you some insight into how to do this. Too bad, instead of 2 lines of code, a 200 lines of code, but it gives you the flexibility of doing whatever you want, including setting the marker style.