Letting users draw curved lines on a google map?

Question

Does anyone have any examples or source for letting users draw curved maps from point a to point b?

Thanks, Alex

I asked this also in the google maps help forum. Here is the thread for that: http://code.google.com/apis/maps/documentation/javascript/forum.html — Genadinik, Mar 18 '11 at 16:54
possibly relevant question [Google Maps API: Bézier curve polyline wrap](http://stackoverflow.com/questions/25529966/google-maps-api-b%C3%A9zier-curve-polyline-wrap/25534438#25534438) — geocodezip, Aug 29 '14 at 17:12

score 16 · Answer 1 · answered Feb 08 '13 at 15:51

You can draw Bezier curves this way:

var GmapsCubicBezier = function(lat1, long1, lat2, long2, lat3, long3, lat4, long4, resolution, map){

    var points = [];

    for(it = 0; it <= 1; it += resolution) {
        points.push(this.getBezier({x:lat1, y:long1},{x:lat2, y:long2},{x:lat3, y:long3},{x:lat4, y:long4}, it));
    }

    for(var i = 0; i < points.length - 1; i++) {
            var Line = new google.maps.Polyline({
                path: [new google.maps.LatLng(points[i].x, points[i].y), new google.maps.LatLng(points[i+1].x, points[i+1].y)],
                geodesic: true,
                strokeOpacity: 0,
                strokeColor: 'yellow',
                icons: [{
                        icon: {
                        path: 'M 0,-2 0,2',
                        strokeColor: 'violet',
                        strokeOpacity: 1,
                        strokeWeight: 4
                    },
                    repeat: '36px'
                },{
                        icon: {
                        path: 'M -1,-2 -1,2',
                        strokeColor: 'black',
                        strokeOpacity: 1,
                        strokeWeight: 2
                    },
                    repeat: '36px'
                }]
            }); 

            Line.setMap(map);   
    }
};


GmapsCubicBezier.prototype = {

    B1 : function (t) { return t*t*t; },
    B2 : function (t) { return 3*t*t*(1-t); },
    B3 : function (t) { return 3*t*(1-t)*(1-t); },
    B4 : function (t) { return (1-t)*(1-t)*(1-t); },
    getBezier : function (C1,C2,C3,C4, percent) {
        var pos = {};
        pos.x = C1.x*this.B1(percent) + C2.x*this.B2(percent) + C3.x*this.B3(percent) + C4.x*this.B4(percent);
        pos.y = C1.y*this.B1(percent) + C2.y*this.B2(percent) + C3.y*this.B3(percent) + C4.y*this.B4(percent);
        return pos;
    }
};

You can modify the code, to provide differents strategies to draw the lines. The one implemented is pointed with "shadow".

The usage is pretty easy:

 var curvedLine = new GmapsCubicBezier(initLat, initLong, control1Lat, control1Long, control2Lat, control2Long, endLat, endLong, 0.1, map);

I modified your algorithim, removing the icons and setting the stroke opacity to 1 so that you can see the original curve, however I'm finding that when I draw lines with different control points that the starting point is not accurate.. For example I get the following result http://imgur.com/9lo6W5r when I use: new GmapsCubicBezier(latStart, longStart, latStart-delta, longStart+delta, latEnd-delta, longEnd+delta, latEnd, longEnd, 0.05, map); new GmapsCubicBezier(latStart, longStart, latStart-delta*2, longStart+delta*2, latEnd-delta*2, longEnd+delta*2, latEnd, longEnd, 0.05, map); — ianpetzer, Mar 12 '14 at 09:20
@ianpetzer yes, that may happen because bezier curves tend to go near control points and not exactly step through them. You can add two straight lines if the first point and last point are no the ones you provided to avoid the gap. It shouldn't be difficult, ask me if you are have some trouble with it. — nicoabie, Mar 12 '14 at 15:20
@nicoabie Thanks for a good answer, but do you have any ideas about how you get the bezier control points(lat2long2 and lat3long3)? — Otani Shuzo, May 23 '19 at 14:57
@OtaniShuzo I'm not sure I'm following, in that example there are 4 control points, the Bezier Curve will try to pass as near to them as possible. — nicoabie, May 26 '19 at 19:27
@nicoabieThanks for your rep! I just don't know how to make those control points from two geopoints(lat, lng) I'd appreciate if you know how to do it or share any link about it with me! — Otani Shuzo, May 27 '19 at 13:06

score 2 · Accepted Answer · answered Mar 19 '11 at 16:17

you might have to use some sort of layer on top of google map. I know there's a cloud app that allows you to scrabble on a google map, but it uses flash to embed the google map scribblemaps.com/… i don't think it's possible to use two points to create a curve perhaps more than two points.

If i understand your application correctly, based on your website, the goal that you wish to achieve is to let users to "blaze a trail"? If that is the case maybe you can create a form where the users can submit Lat Lng coordinates of the "trials" that they've "blazed," and then use Polyline to draw the curve line similar to this google map draw curved line.

However, if users just want to know how to hike from point a to point b and etc, then you can use DirectionService and DirectionRenderer, and set the DirectionsTravelMode to google.maps.DirectionsTravelMode.WALKING and render the direction on the map that way so the user would know how to hike a route with directions drawn on the map + actual direction instructions.

Letting users draw curved lines on a google map?

2 Answers2

Linked