Google Maps APIでMySQLデータを使用する

Question

私は、HTML、PHP、Javascriptを含む.phpファイルと、日付で注文されたGPS情報を含むMySQLにdataという名前のテーブルを使用しています。ユーザーがフォームに日付を入力できるように、次のコードを使用しています。ユーザーが日付を入力すると、サーバー側で、ボタンを押した後

<form method="POST"> 
     <div class="col-sm-12"> 
      <p> 
       <label for="route_date_ids">Insert date</label> 
       <input name="route_date_id"></input> 
      </p> 
     </div> 
     <div class="col-sm-12"> 
      <p> 
       <input type="submit" value="View route"/> 
      </p> 
     </div> 
    </form> 
<?php if (isset($_POST['route_date_id'])) : ?> 
<?php 
$query = "SELECT * FROM data WHERE measured_at LIKE ". $_POST['route_date_id']; 
$result = mysqli_query($conn, $query); 

ので、私はその日、ユーザーが入力した文字で始まるデータを取得します。私のobjetiveは今、その情報（緯度と経度のデータを含む$結果）を次の関数に渡すことです。

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: {lat: 0, lng: -180}, 
     mapTypeId: 'terrain' 
    }); 
    var flightPlanCoordinates = [ 
     {lat: 37.772, lng: -122.214}, 
     {lat: 21.291, lng: -157.821}, 
     {lat: -18.142, lng: 178.431}, 
     {lat: -27.467, lng: 153.027} 
    ]; 
    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

したがって、送信後にページをリロードすると、マップはユーザーが入力した日付に対応する座標を示します。

この最後の質問は解決できません。どんな助けもありがとう。

Answer 1

は、次のようにIDを形成与える：次のように

<form id = "form"> 

も、入力フィールドにIDを与える（inputタグを覚えて、スタンドアローンタグである、それはタグを閉じる必要はありません）

<input name="route_date_id" id = "route_date_id"> 

initMap（）メソッドの外で、以下のスクリプトに示すように変数 'map'を宣言し、 'data_fetcher.php'という名前の別ファイルを作成し、ajax呼び出しを行い、$ _POST [ 'date_value']をdate_fetcher.phpファイルに書き込んでから、lat、lng daをフェッチするロジックを書いてくださいtaは日付に対応します。結果を取得したら、それを配列に格納し、結果をjson_encodeにしてエコーすると、ajax呼び出しに応答して返されます。結果で得られたlat、lngが配列に格納される必要がある次のスクリプトのコメントを観察します。また、jqueryライブラリを含めることを忘れないでください。

var map; 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 3, 
    center: {lat: 0, lng: -180}, 
    mapTypeId: 'terrain' 
}); 
google.maps.event.addDomListener(document.getElementById('form'), 'submit', function(e) { 
    var date_data = document.getElementById('route_date_id').value; 
    $.ajax({ 
    url:"data_fetcher.php", 
    type:"POST", 
    data: {date_value:date_data},   
    dataType: 'json', 
    success: function(respond){ 


//In the respond you will get the coordinates add them to the array, 'flightPlanCoordinates' then 


     var flightPath = new google.maps.Polyline({ 
      path: flightPlanCoordinates, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     flightPath.setMap(map);   
    console.log("AJAX level request was successful"); 
    }, 
    error: function(){ 
    console.log("AJAX level request was a failure"); 
    } 
}); 

ハッピーコーディング!!!