JavaScript file to calc distance between two spots with Google Maps API v3.

google_maps_dist.js

// ページ読み込み完了時に実行する関数
function init() {
  // 初期値位置定数
  const LAT_1 =  35.472222;  // 島根県庁・緯度
  const LNG_1 = 133.050556;  // 島根県庁・経度
  const LAT_2 =  35.468056;  // 松江市役所・緯度
  const LNG_2 = 133.048611;  // 松江市役所・経度

  // 初期位置表示
  document.getElementById('lat-1').value = LAT_1;
  document.getElementById('lng-1').value = LNG_1;
  document.getElementById('lat-2').value = LAT_2;
  document.getElementById('lng-2').value = LNG_2;

  // 初期位置設定
  var lat_lng_1 = new google.maps.LatLng(LAT_1, LNG_1);
  var lat_lng_2 = new google.maps.LatLng(LAT_2, LNG_2);

  // オプション設定
  var opts = {
    zoom: 15,
    center: lat_lng_1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // マップ表示
  map = new google.maps.Map(document.getElementById("map"), opts);

  // ドラッグできるマーカーを表示
  marker_1 = new google.maps.Marker({
    position: lat_lng_1,
    title: "位置１",
    draggable: true
  });
  marker_2 = new google.maps.Marker({
    position: lat_lng_2,
    title: "位置２",
    draggable: true
  });
  marker_1.setMap(map);
  marker_2.setMap(map);

  // ２点を結ぶ線を表示
  polyline(lat_lng_1, lat_lng_2);

  // 距離計算
  var d = calc_distance(LAT_1, LNG_1, LAT_2, LNG_2);

  // 計算結果表示
  document.getElementById('dist').innerHTML = d;

  // マーカーのドロップ（ドラッグ終了）時のイベント
  // [位置１]
  google.maps.event.addListener(marker_1, 'dragend', function(ev){
    // 緯度・経度取得
    var lat_1 = ev.latLng.lat();
    var lng_1 = ev.latLng.lng();
    var lat_2 = document.getElementById('lat-2').value;
    var lng_2 = document.getElementById('lng-2').value;
    document.getElementById('lat-1').value = Math.round(lat_1 * 1000000) / 1000000;
    document.getElementById('lng-1').value = Math.round(lng_1 * 1000000) / 1000000;
    // ２点を結ぶ線を表示
    line.setMap(null);
    polyline(
      new google.maps.LatLng(lat_1, lng_1),
      new google.maps.LatLng(lat_2, lng_2)
    );
    // ２点間の距離計算
    var d = calc_distance(lat_1, lng_1, lat_2, lng_2);
    document.getElementById('dist').innerHTML = d;
  });
  // [位置２]
  google.maps.event.addListener(marker_2, 'dragend', function(ev){
    // 緯度・経度取得
    var lat_1 = document.getElementById('lat-1').value;
    var lng_1 = document.getElementById('lng-1').value;
    var lat_2 = ev.latLng.lat();
    var lng_2 = ev.latLng.lng();
    document.getElementById('lat-2').value = Math.round(lat_2 * 1000000) / 1000000;
    document.getElementById('lng-2').value = Math.round(lng_2 * 1000000) / 1000000;
    // ２点を結ぶ線を表示
    line.setMap(null);
    polyline(
      new google.maps.LatLng(lat_1, lng_1),
      new google.maps.LatLng(lat_2, lng_2)
    );
    // ２点間の距離計算
    var d = calc_distance(lat_1, lng_1, lat_2, lng_2);
    document.getElementById('dist').innerHTML = d;
  });
}

// 距離計算関数
function calc_distance(lat_1, lng_1, lat_2, lng_2) {
  // 測地系定数
  // GRS80 ( 世界測地系 ) <- 現在の日本での標準
  const RX = 6378137.000000  // 赤道半径
  const RY = 6356752.314140  // 極半径
  // ベッセル楕円体 ( 旧日本測地系 ) <- 以前の日本での標準
  //const RX = 6377397.155000  // 赤道半径
  //const RY = 6356079.000000  // 極半径
  // WGS84 ( GPS ) <- Google はこの測地系
  //const RX = 6378137.000000  // 赤道半径
  //const RY = 6356752.314245  // 極半径

  // 2点の経度の差を計算 ( ラジアン )
  var a_x = lng_1 * Math.PI / 180 - lng_2 * Math.PI / 180;

  // 2点の緯度の差を計算 ( ラジアン )
  var a_y = lat_1 * Math.PI / 180 - lat_2 * Math.PI / 180;

  // 2点の緯度の平均を計算
  var p = (lat_1 * Math.PI / 180 + lat_2 * Math.PI / 180) / 2;

  // 離心率を計算
  var e = Math.sqrt((RX * RX - RY * RY) / (RX * RX));

  // 子午線・卯酉線曲率半径の分母Wを計算
  var w = Math.sqrt(1 - e * e * Math.sin(p) * Math.sin(p));

  // 子午線曲率半径を計算
  var m = RX * (1 - e * e) / (w * w * w);

  // 卯酉線曲率半径を計算
  var n = RX / w;

  // 距離を計算
  var d  = Math.pow(a_y * m, 2) + Math.pow(a_x * n * Math.cos(p), 2);
  d = Math.round(Math.sqrt(d)) / 1000;

  return d;
}

// マーカー移動
function remark() {
  // 緯度経度取得
  var lat_1 = document.getElementById('lat-1').value;
  var lng_1 = document.getElementById('lng-1').value;
  var lat_2 = document.getElementById('lat-2').value;
  var lng_2 = document.getElementById('lng-2').value;

  // 南西位置・北東位置
  var lat_sw, lng_sw, lat_ne, lng_ne;
  if (lat_1 <= lat_2) {
    lat_sw = lat_1;
    lat_ne = lat_2;
  } else {
    lat_sw = lat_2;
    lat_ne = lat_1;
  }
  if (lng_1 <= lng_2) {
    lng_sw = lng_1;
    lng_ne = lng_2;
  } else {
    lng_sw = lng_2;
    lng_ne = lng_1;
  }

  // 矩形設定
  var ll_sw = new google.maps.LatLng(lat_sw, lng_sw);
  var ll_ne = new google.maps.LatLng(lat_ne, lng_ne);
  var bounds = new google.maps.LatLngBounds(ll_sw, ll_ne);

  // マップ移動表示
  map.fitBounds(bounds);

  // マーカー移動
  marker_1.setPosition(new google.maps.LatLng(lat_1, lng_1));
  marker_2.setPosition(new google.maps.LatLng(lat_2, lng_2));

  // ２点を結ぶ線を表示
  line.setMap(null);
  polyline(
    new google.maps.LatLng(lat_1, lng_1),
    new google.maps.LatLng(lat_2, lng_2)
  );

  // 距離計算
  var d = calc_distance(lat_1, lng_1, lat_2, lng_2);

  // 計算結果表示
  document.getElementById('dist').innerHTML = d;
}

// ２点を結ぶ線を表示
function polyline(lat_lng_1, lat_lng_2) {
  line = new google.maps.Polyline({
    path: [lat_lng_1, lat_lng_2],
    strokeColor: "#00FF00",
    strokeOpacity: .7,
    strokeWeight: 5
  });
  line.setMap(map);
}

// ONLOADイベントにセット
window.onload = init();