Maps API v3: Calculate bearing

Question

I've been struggling with this for a while & need some advice. I have seen some similar topics but can't find an answer that works for me.

I am creating an app using google maps API that will determine your location, determine a specific point (point b) and then move an arrow to point in the direction of point b. I am having trouble calculating the bearing, could anyone offer some assistance?

I have: - the lat/lng of point a - the lat/lng of point b - the device knows where North is and I am able to calculate how many degrees away from north the device is pointing

I need: a calculation that will take this information and spit out a number of degrees to point the arrow.

I have looked here which seems useful but I still can't get it working - it's returning NaN

http://www.movable-type.co.uk/scripts/latlong.html

I'm not really a js pro so would really appreciate some guidance here.

Thanks very much!

can you share your attempt (that returned NaN)? – sfletche May 26 '14 at 06:12 — sfletche, May 26 '14 at 06:12

MrUpsidown · Accepted Answer · 2020-03-22T22:38:49.890

14

You can use the Geometry Library.

You need to add it to the API call:

https://maps.googleapis.com/maps/api/js?libraries=geometry

Then use the computeHeading method:

var heading = google.maps.geometry.spherical.computeHeading(pointA, pointB);

where pointA and pointB are the two LatLng objects.

https://developers.google.com/maps/documentation/javascript/reference?csw=1#spherical

edited Mar 22 '20 at 22:38

answered May 26 '14 at 07:30

MrUpsidown

21,592
15
77
131

2

You're a legend. Thank you! – user3675220 May 27 '14 at 00:44

score 1 · Answer 2 · answered Jun 21 '17 at 08:31

Below is a dynamically working example.

<!DOCTYPE html>
<html>
<head>
<style>
    html,
    body,
    #map-canvas {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry&ext=.js"></script>
<div id="info"></div>
<div id="map-canvas"></div>
<script type="text/javascript">
    var map;
    var infowindow = new google.maps.InfoWindow();
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(32.0748, 34.774);
        var mapOptions = {
            zoom: 15,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        point1 = new google.maps.Marker({
            map: map,
            draggable: true,
            position: google.maps.geometry.spherical.computeOffset(map.getCenter(), 0, 80)
        });
        google.maps.event.addListener(point1, 'dragend', bisectAngle);

        point2 = new google.maps.Marker({
            map: map,
            draggable: true,
            position: google.maps.geometry.spherical.computeOffset(map.getCenter(), 800, -58.6)
        });
        google.maps.event.addListener(point2, 'dragend', bisectAngle);

        var poly3 = new google.maps.Polyline({
            path: [point1.getPosition(), point2.getPosition()],
            map: map
        });
        poly3.binder = new MVCArrayBinder(poly3.getPath());
        point1.bindTo('position', poly3.binder, '0'); //this makes the line bind to point 1
        point2.bindTo('position', poly3.binder, '1'); //and point 2

        var bounds = new google.maps.LatLngBounds();
        bounds.extend(point1); 
        bounds.extend(point2);
        map.fitBounds(bounds); //zooms in
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, 'load', bisectAngle);

    function bisectAngle() {
        var head1 = google.maps.geometry.spherical.computeHeading(point1.getPosition(), point2.getPosition());
        document.getElementById('info').innerHTML = "Bearing is " + head1.toFixed(1) + " or " + (head1 + 90).toFixed(1) + " if E-W is 0. Better try daniel street...";
    }

    /*
     * Use bindTo to allow dynamic drag of markers to refresh poly.
     */
    function MVCArrayBinder(mvcArray) { //credit to https://stackoverflow.com/a/26663570/2381899
        this.array_ = mvcArray;
    }
    MVCArrayBinder.prototype = new google.maps.MVCObject();
    MVCArrayBinder.prototype.get = function (key) {
        if (!isNaN(parseInt(key))) {
            return this.array_.getAt(parseInt(key));
        } else {
            this.array_.get(key);
        }
    }
    MVCArrayBinder.prototype.set = function (key, val) {
        if (!isNaN(parseInt(key))) {
            this.array_.setAt(parseInt(key), val);
        } else {
            this.array_.set(key, val);
        }
    }
</script>
</body>
</html>

Maps API v3: Calculate bearing

2 Answers2

Linked