whimzee whimzee - 1 year ago 84
Javascript Question

Getting LatLong of point on circle based on given angle

Given that you have this circle defined on your map, how would you get the LatLong of the point that intersects at a given angle?

var degrees = 90;
var center = {lat: 34.052235, lng: -118.243683};
var circle = new google.maps.Circle({
center: center,
radius: 500000
});

var pointOnCircle = ?


Map

Answer Source

You can use the geometry library computeOffset method:

  var pointOnCircle = google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), degrees);

proof of concept fiddle

screen shot of result

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var degrees = 90;
  var center = {
    lat: 34.052235,
    lng: -118.243683
  };
  var circle = new google.maps.Circle({
    center: center,
    radius: 500000,
    map: map
  });
  map.fitBounds(circle.getBounds());
  var pointOnCircle = google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), degrees);
  var marker = new google.maps.Marker({
    map: map,
    position: pointOnCircle
  });
  var polyline = new google.maps.Polyline({
    map: map,
    path: [circle.getCenter(), pointOnCircle]
  })
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download