常連

## やりたいこと
下記リストを、GeolocationAPIを用いて距離が近い順に並び替えたい

##コード
vue.jsを用いてリストを表示させています。
```html
<div class="container">
			  
				   
				  
				  <div v-if="isError" class="error">{{message}}</div>
				  
				  <div class="list">
					<div class="item" v-for="product in filteredList" v-bind:key="product.id">
					  <figure class="image">
						
						<img v-bind:src="product.image" alt="病院画像">
						
					  </figure>
					  <div class="detail clearfix">
						<figcaption v-html="product.name" class="name"></figcaption>
						<div class="adress"><i class="fas fa-hospital-alt fa-lg"></i> {{product.adress}}</div>
						<div class="price"><i class="fas fa-phone fa-lg"></i> {{product.price}}</div>
						<div class="station"><i class="fas fa-subway fa-lg"></i> {{product.station}}駅</div>
						
					  </div>
					  <figure class="schedule">
						  <img v-bind:src="product.schedule" alt="">
					  </figure>
					   <div class ="byoin-bg3">
						  <a href="https://docs.google.com/forms/d/e/1FAIpQLScLxeWPRbhwJxPbZQAdm8TSJpS2u-6D2DAL7Oa8dYmNdtXrxw/viewform?usp=sf_link"> <p class="byoin-bg3-text">この病院を予約</p></a>
					   </div>
					</div>
				  </div>
				</div>
```

リストはこれです
```js
products([
  { "id": 1, "name": "南青山アンティーク通りクリニック", "adress": "東京都港区南青山5-14-1 グリーンビル3F", "price": "03-3400-0612", "image": "minamiaoyama.jpg","schedule":"minamiaoyama_sche.png", "station": "表参道", "delv": 0, "isSale": true },
  { "id": 2, "name": "東京メンタルクリニック", "adress": "東京都港区新橋2-19-2 リプロ新橋ビル5F", "price": "03-6263-8314", "image": "toukyoumentaru.jpg",　"schedule":"tokyomental_sche.png", "station": "新橋", "delv": 0, "isSale": true },
  { "id": 3, "name": "かわぐちクリニック", "adress": "大阪府大阪市北区紅梅町2-2カザリーノⅡ3F", "price": "06-6882-1533", "image": "kawaguti.jpg",　"schedule":"kawaguti_sche.png", "station": "大阪天満宮", "delv": 0, "isSale": true },
  { "id": 4, "name": "野口クリニック", "adress": "神奈川県川崎市宮前区鷺沼3-1-12伏見ビル3F", "price": "044-853-0080", "image": "noguti.jpg",　"schedule":"noguti_sche.png", "station": "鷺沼", "delv": 0, "isSale": true },
  { "id": 5, "name": "中原こころのクリニック", "adress": "神奈川県川崎市中原区上小田中6-21-7リパーク4F", "price": "044-819-6733", "image": "nakahara.jpg",　"schedule":"nakahara_sche.png", "station": "武蔵中原", "delv": 0, "isSale": true },
  { "id": 6, "name": "医療法人菅原クリニック", "adress": "京都府京都市下京区塩小路通烏丸西入る東塩小路町579F", "price": "075-351-4111", "image": "sugawara.jpg",　"schedule":"sugawara_sche.png", "station": "京都", "delv": 0, "isSale": true },
  { "id": 7, "name": "財団法人長岡記念財団 長岡病院", "adress": "京都府長岡京市友岡4-18-1", "price": "075-951-9201", "image": "nagaoka.jpg",　"schedule":"nagaoka_sche.png", "station": "西山天王山", "delv": 0, "isSale": true },
  { "id": 8, "name": "財医療法人高柳会 赤城病院", "adress": "群馬県前橋市江木町1072", "price": "027-269-5111", "image": "akagi.jpg",　"schedule":"akagi_sche.png", "station": "前橋", "delv": 0, "isSale": true },
  { "id": 9, "name": "北越谷駅前さくらメンタルクリニック", "adress": "埼玉県越谷市北越谷4-21-1GMCビル北越谷3F", "price": "048-940-3117", "image": "sakura.jpg",　"schedule":"sakura_sche.png", "station": "北越谷", "delv": 0, "isSale": true },
]);
```
GeolocationAPIの内容を記載した部分はこちらです
```js
// データリストの緯度経度を取得
function dfdGeocode(){
  var dfd = $.Deferred();

  // Geocoderのインスタンスを生成
  var geocoder = new google.maps.Geocoder();

  // カウンター
  var cnt = 0;

  // データ分緯度経度の取得
  $.each(products, function(i, data){
      geocoder.geocode({
          adress: data.adress
      }, function(d, status){
          data.lat = d[0].geometry.location.lat(); //緯度
          data.lng = d[0].geometry.location.lng(); //経度
          cnt++;
          if( cnt === products.length ){
              dfd.resolve();
          }
      });
  });

  return dfd.promise();
}


// 現在位置の取得
function dfdCurrentPosition(){
  var dfd = $.Deferred();

  // Geolocationが使用可能かチェック
  if( !window.navigator.geolocation ) dfd.reject();

  // 現在地の取得
  window.navigator.geolocation.getCurrentPosition(
      // Success
      function(position){
          dfd.resolve(position);
      },
      // Error
      function(error){
          dfd.reject();
      },
      // Options
      {
          enableHighAccuracy:true, //位置情報の精度を高く
          timeout: 10000, //10秒でタイムアウト
          maximumAge: 600000 //10分間有効
      }
  );

  return dfd.promise();
}


// DOM Content Loaded
function dfdDocumentReady(){
  var dfd = $.Deferred();
  $(function(){
      dfd.resolve($(document));
  });
  return dfd.promise();
}


// データが揃った段階でソートを開始
$.when(
  dfdCurrentPosition(),
  // dfdGeocode(),
  dfdDocumentReady()
)
.done(function(position){

  // 現在地
  var coords = position.coords;

  // 距離の割り出しを行ない、各データにdistance属性を設定
  $.each(products, function(i, data){
      data.distance = getDistance(data.lat, data.lng, coords.latitude, coords.longitude, 0) / 1000; //kmで算出
  });

  // 現在地からの距離が小さい順にソート
  dataList.sort(function(a, b){
      return (a.distance < b.distance) ? -1 : 1;
  });

  // データを出力
  var html =  "";

  $.each(dataList, function(i, data){
      html += ' <div class="list">';
          html += '<div class="item" v-for="product in filteredList" v-bind:key="product.id">'+(i+1)+'</div>';
          html += '<div class="item" v-for="product in filteredList" v-bind:key="product.id"><a href="https://maps.google.co.jp/maps?q='+data.lat+','+data.lng+'&z=17&iwloc=A" target="_blank">';
              html += data.name;
          html += '</a></div>';
          html += '<div class="item" v-for="product in filteredList" v-bind:key="product.id">'+data.distance+'km</div>';
      html += '</div>';
  });

  $("#data-list").append(html);

})
.fail(function(){
  alert("お使いの端末の位置情報サービスが無効になっているか対応していないため、エラーが発生しました");
  console.log("error", arguments);
});


/**
* 2点間の緯度経度から距離を取得
* 測地線航海算法を使用して距離を算出する。
* @see http://hamasyou.com/blog/2010/09/07/post-2/
* @param float 緯度1
* @param float 経度2
* @param float 緯度2
* @param float 経度2
* @param 小数点以下の桁数(べき乗で算出精度を指定)
*/
function getDistance(lat1, lng1, lat2, lng2, precision){
var distance = 0;
if( ( Math.abs(lat1 - lat2) < 0.00001 ) && ( Math.abs(lng1 - lng2) < 0.00001 ) ) {
  distance = 0;
}else{
  lat1 = lat1 * Math.PI / 180;
  lng1 = lng1 * Math.PI / 180;
  lat2 = lat2 * Math.PI / 180;
  lng2 = lng2 * Math.PI / 180;

  var A = 6378140;
  var B = 6356755;
  var F = ( A - B ) / A;

  var P1 = Math.atan( ( B / A ) * Math.tan(lat1) );
  var P2 = Math.atan( ( B / A ) * Math.tan(lat2) );

  var X = Math.acos( Math.sin(P1) * Math.sin(P2) + Math.cos(P1) * Math.cos(P2) * Math.cos(lng1 - lng2) );
  var L = ( F / 8 ) * ( ( Math.sin(X) - X ) * Math.pow( (Math.sin(P1) + Math.sin(P2) ), 2) / Math.pow( Math.cos(X / 2), 2 ) - ( Math.sin(X) - X ) * Math.pow( Math.sin(P1) - Math.sin(P2), 2 ) / Math.pow( Math.sin(X), 2) );

  distance = A * ( X + L );
  var decimal_no = Math.pow(10, precision);
  distance = Math.round(decimal_no * distance / 1) / decimal_no;
}
return distance;
}
```

## 困っていること![イメージ説明](40a5cb04c93be8aeee543f722d9922fb.png)
ページを開くと、添付画像のようなポップアップが表示される。

##トライしたこと
Chromeの設定を確認。位置情報を許可していることを確認。
コードが古いのでは？と探してみたところ、違いすぎてどこから書き換えればいいのかわからない状態になってしまいました、、、

### 参考
http://webdesign-dackel.com/2015/01/18/google-maps-api/
https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API

質問編集履歴