Subtract meters from latitude

Question

What is the simplest way to calculate a new latitude point by going SOUTH x number of meters from a given latitude? For example, the Eiffel Tower is at 48.8582 latitude and 2.2940 longitude. I have a circle around the Tower with a radius of 171 meters. I want to position an InfoBox just beneath the circle.

So here is my circle:

var circle = new google.maps.Circle({
    map: map,
    fillColor: 'red',
    fillOpacity: 0.2,
    strokeWeight: 1,
    center: new google.maps.LatLng(48.8582, 2.2940),
    radius: 171
});

My infobox currently gets positioned dead center on the circle, but I want it directly beneath the circle instead. So I'm guessing I just need to move the box (171/2=85.5) meters south to get the positioning I want.

Is there a simple calculation for this? I have looked at the haversine formula but that seems a lot more complex than what I need, and I don't understand how to use it, and whether it even suits this problem.

I want to go south exactly 85.5 meters and get new lat/long coords for positioning of the InfoBox. Presumably only latitude would change, but I'm uncertain.

Answer 1

85.5 meters south is very easy, because a degree latitude has always the same value in meters. The Earth has a circumference of ± 40075 km, which corresponds to 360 degrees, so your answer is 360 * 85.5 / 40075000 = 0.000768 degrees.

Answer 2

You can calculate 171 meters south using the spherical geometry computOffset method

google.maps.geometry.spherical.computeOffset(circle.getCenter(),circle.getRadius(),180)

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var bounds = new google.maps.LatLngBounds();
  geocoder = new google.maps.Geocoder();
  var secheltLoc = new google.maps.LatLng(-27.532861, 134.693340),
    markers,
    myMapOptions = {
      zoom: 7,
      center: secheltLoc,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);

  var circle = new google.maps.Circle({
    map: map,
    fillColor: 'red',
    fillOpacity: 0.2,
    strokeWeight: 1,
    center: new google.maps.LatLng(48.8582, 2.2940),
    radius: 171
  });
  map.fitBounds(circle.getBounds());
  var boxText = document.createElement("div");
  boxText.innerHTML = "Eiffel Tower<br>48.8582 latitude<br> 2.2940 longitude";
  // Start InfoBox
  //these are the options for all infoboxes
  infoboxOptions = {
    content: boxText,
    disableAutoPan: false,
    zIndex: null,
    maxWidth: 0,
    boxStyle: {
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
      opacity: 0.85
    },
    closeBoxMargin: "6px 2px 0px 0px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false,
    pixelOffset: new google.maps.Size(-50, 0)
  };

  //define the text and style for all infoboxes
  boxText.style.cssText = "width: 100px; border: 1px solid #333; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px; color: #333";

  //Define the infobox
  var infobox = new InfoBox(infoboxOptions);
  infobox.setPosition(google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), 180));
  infobox.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
  height: 400px;
  width: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script>
<script src="http://www.staff.org.au/infobox.js"></script>
<div id="map-canvas"></div>