6

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

Thanks, Alex

2

2 Answers 2

16

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);
5
  • 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 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, 2014 at 9: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, 2014 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)? May 23, 2019 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, 2019 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! May 27, 2019 at 13:06
2

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.