PHPの反復処理の中にJSの処理を加えたい

ぐるなびAPIを通じて、投稿ページから店舗名や緯度経度などをDBへ格納し、それらをSNSのように上下に一覧化するサービスの実装を行っています。店舗名などはDBから直接取得できるのですが、緯度経度については現在地からの所要時間を表示するべく、BingMapsのAPIを通して処理したいと思っていますが、どこにこのJS処理を入れるべきなのか試行錯誤しており、アドバイス頂けないでしょうか。
プログラミング歴数ヶ月なので、言葉使いなど的確でないかもしれませんが、ご容赦ください。

具体的な手順は以下のとおりです。
・ぐるなびAPIから各店舗の緯度経度を取得し、PHPでDBに格納
・BingMapsのAPIにより、現在地の緯度経度を取得
・BingMapsのAPIにより、現在地と店舗の移動にかかる所要時間を取得
・所要時間を一覧の中に表示

該当のソースコード

php
1//以下の$viewをデータ数分だけ反復処理し、htmlへ埋め込むことで一覧化したい
2//ただし、#traveldurationについては、JS処理したデータを表示させたい
3    $view .='<li>
4              <div class="each_content">
5                <div class="image_wrapper">'.'<img class ="image" src="image/'.$res["image"].'" alt="">'.'</div>
6                <div class="content_letter_wrapper">
7                  <p class ="post_time">'.$res["post_time"].'</p>
8                  <p class ="prefname">'.$res["prefname"].'</p>
9                  <p class ="restaurant_name"><a target="_blank" href ="'.$res["restaurant_url"].'">'.$res["restaurant_name"].'</a></p>
10                  <p class ="username"><a href ="top.php?name='.$res["name"].'">'.$res["name"].'さん</a></p>
11                  <p class ="comment">「'.$res["comment"].'」</p>
12                  <p class ="price">（'.$res["price"].'円）</p>
13                  <p class ="travelduration"  id="travelduration"></p>
14                </div>
15             </div>
16            </li>';

js
1//以下のBingMapsの処理を用いたいが上記PHPの中にどう組み込むべきかが分からず、アドバイスをいただきたいです。
2function mapsInit(position) {
3  //現在地をlat=緯度、lon=経度 として取得し、s_lat_lonへ一旦挿入
4  const s_lat = position.coords.latitude;
5  const s_lon = position.coords.longitude;
6  const s_lat_lon = s_lat + "," + s_lon;
7};
8navigator.geolocation.getCurrentPosition(mapsInit, mapsError, set);
9
10const s_wp = <?php echo $res["latitude"] ?>+','+ <?php echo $res["longitude"] ?>;
11const d_wp = s_lat_lon;
12const maps_url = "https://dev.virtualearth.net/REST/V1/Routes/Driving?wp.0="+s_wp+"&wp.1="+d_wp+"&avoid=minimizeTolls&key=[key]";
13
14$.getJSON(maps_url, function(response) {
15  let results = response.resourceSets[0].resources;
16  console.log(results[0].travelDuration);
17  $("#travelduration").val(results[0].travelDuration);
18  });

試したこと

上記の&viewの中にscriptを埋め込むことも試してみましたが、うまくいかず。
説明が分かりにくく恐縮ですが、アドバイスいただけますと幸いです。宜しくお願い致します。

m.ts10806

2019/11/05 20:20

>説明が分かりにくく恐縮ですが、書かれた内容しか汲み取ることはできません。「分かりにくい」と自覚があるのでしたらそう書く手間を分かりやすくするほうに当ててもらいたいですし、挨拶やテンプレート文言のようなものでしたら要件と関係ないので不要です。

SatoruIida

2019/11/06 01:59

失礼致しました。回答でいただいたアドバイスに基づいて再度試した上で、それでも実装できない場合はより詳しく記載させていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

アドバイス、ということなので、数点。
0. 繰り返し出力する要素内にid="travelduration"のような固定のidを使わない
（HTML中に出てくるidは同じ値を使わない）
0. JavaScript中に<?php echo $res["latitude"] ?>のような出力をするのではなく、別途配列を渡す仕様にするか、HTMLに埋め込んでおいてJavaScriptから集めるようにしましょう（詳しくはJavaScriptを勉強しましょう）
0. 「BingMapsのAPIにより、現在地の緯度経度を取得」と質問文に書かれていますがnavigator.geolocation.getCurrentPositionはブラウザのAPIです。
0. どれくらいの地点が有るかはわかりませんが、一般的にAPIは1単位時間に呼べる回数が決まっているので、そもそもできるか（予算があるのか）調べてみましょう。