Geolocation API において、現在地取得失敗

実現したいこと

Geolocation API を使ってスマホで位置情報を取得したいのですが、navigator.geolocation.getCurrentPosition　を実行したときに、PERMISSION_DENIED　になってしまいます。PCで実行すると、位置情報は取得できます。
スマホのブラウザーは、safari と chrome で行いましたが、結果は同じです。
スマホは、iPhone, Android の両方で行っても同じ結果です。
Androidの設定画面から位置情報のChromeは「アプリの使用中のみ許可」にしています。
iPhoneの設定画面からchromeの位置情報は「使用中のみ許可」にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>位置情報取得サンプル</title>

  <script>
    // Geolocation APIに対応している
    if (navigator.geolocation) {
      alert("この端末では位置情報が取得できます");
    // Geolocation APIに対応していない
    } else {
      alert("この端末では位置情報が取得できません");
    }

    // 現在地取得処理
    function getPosition() {
      // 現在地を取得
      navigator.geolocation.getCurrentPosition(
        // 取得成功した場合
        function(position) {
            alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
        },
        // 取得失敗した場合
        function(error) {
          switch(error.code) {
            case 1: //PERMISSION_DENIED
              alert("位置情報の利用が許可されていません");
              break;
            case 2: //POSITION_UNAVAILABLE
              alert("現在位置が取得できませんでした");
              break;
            case 3: //TIMEOUT
              alert("タイムアウトになりました");
              break;
            default:
              alert("その他のエラー(エラーコード:"+error.code+")");
              break;
          }
        }
      );
    }
  </script>
</head>
<body>
  <h1>位置情報取得サンプル</h1>
  <button onclick="getPosition();">位置情報を取得する</button>
</body>
</html>