Drawing a line in Google maps perpendicular to two points

Question

I have two coordinates for which I would like to draw a perpendicular line of equal length. Is there either a simple google map mapping for this, or a clean JavaScript approach with which I could do this? What will it be?

Here is what I still have. As you can see, I draw two points as markers, and then try to draw a line between them, except that I need to move this straight line between the two coordinates.

var locations = [ ['', position.coords.latitude, position.coords.longitude, 1], ['', llat, llng, 2] ]; var marker, i; for ( var i = 0; i < locations.length; i++ ) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); } var borderPlanCoordinates = [ new google.maps.LatLng(llat, position.coords.longitude), new google.maps.LatLng(position.coords.latitude,llng) ]; var borderPath = new google.maps.Polyline({ path: borderPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 10, map: map }); borderPath.setMap(map); 

Answer 1

So you have two points with coordinates (x1,y1) and (x2, y2) , and you want to draw a segment of a line whose length is the distance between them, which is the perpendicular bisector of the segment connecting them, and which divides in half mentioned segment?

Perhaps the easiest way is to set cx = (x1 + x2)/2 , cy = (y1+y2)/2) , dx = (x2-x1)/2 , dy = (y2-y1)/2 , and then draw a line from (cx-dy, cy+dx) to (cx+dy, cy-dx) .

This works because (cx, cy) is the middle of the segment you want, and then you simply transfer the vector from that middle to (x2,y2) and rotate it by plus and minus 90 degrees to find the endpoints of the segment you want to draw.

Answer 2

I tried this solution, the middle of the segment is fine, but it does not look perpendicular on Google maps, I suspect due to the spherical projection (not orthonormal).

Here is a solution that works:

 spherical = google.maps.geometry.spherical; var F = new google.maps.LatLng(latF, longF); var T = new google.maps.LatLng(latT, longT); // M is the middle of [FT] var latM = (latF + latT)/2; var longM = (longF + longT)/2; var M = new google.maps.LatLng(latM, longM); // Get direction of the segment var heading = spherical.computeHeading(F, T); var dist = 200; // distance in meters // Place point A that is oriented at 90° in a distance of dist from M var A = spherical.computeOffset(M, dist, heading+90); var perpendicularCoordinates = [M, A ]; var perpendicular = new google.maps.Polyline({ path: perpendicularCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2, map: map }); 

Here is the related script: http://jsfiddle.net/8m7vm650/15/

Note that you need to use an additional google map library called geometry, which is created by adding libraries = geometry to the query string when loading maps: http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false