POSTを使用してクライアント側ジオコーディング結果を渡す

Question

2つのテキスト入力ボックス、search_termおよびsearch_locationのフォームを含むページを作成しています。これにより、サイトユーザは、特定の場所に近い場所を検索することができます。 APIの制限にぶつからないように、私はクライアントのテキスト入力ボックスからユーザー入力アドレスをLatLng座標にジオコードする必要があります。これは$_POST[]に渡され、MySQLデータベースの関連レコードにアクセスします。住所/郵便番号で

1. ユーザータイプをsearch_locationテキスト入力ボックス& search_termテキスト入力ボックスにキーワードに：

   は、これは、私はそれが動作するはずだと思う方法です。

2. Submitボタンをクリックすると、JSイベントハンドラはGoogleジオコーダAPIを使用して結果をジオコードし、LatLngの座標を返します。
3. LatLngの座標はPHP関数に渡され、POST変数にアクセスし、データベースにアクセスして必要な結果を取得します。

質問： 私はので、私はPOST内に沿ってLatLng座標を渡すことができますGoogleのジオコーダAPIからのジオコード結果を取得した後、フォームを提出することができますかわかりません。現時点では、フォームはsearch_termとsearch_locationの入力ボックスにユーザーが入力した値を渡します。

Answer 1

基本的にはあなたが（あなたが1つの文字列として保存する場合を除き、緯度とLNGのために別のもの）2つの隠されたフィールドを設定し、それにCOORDSを保存し、フォームを提出する必要があります。

フォーム：

あなたは、Googleが応答を返すか、フォームのをonSubmit（）イベントを使用するまで、送信アクションをキャンセルする必要がある送信ボタンを使用している場合、私はボタンタイプを使用したフォームで

<form id='codeForm' action='some.php'> 
<input type='text' name='search_location'> 
<input type='text' name='search_term'> 
<input type='hidden' name='lat'> 
<input type='hidden' name='lng'> 
<input type="button" value="Search" onclick="codeAddress()"> 
</form> 

。

あなたのジオコードJS機能：

function codeAddress() { 
myForm = document.forms["codeForm"] 
    //get the address 
     var address = myForm.elements["search_location"].value; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
    //geocode was successful  
    if (status == google.maps.GeocoderStatus.OK) { 
//grab the lat and long 
      lat = results[0].geometry.location.lat 
    lng = results[0].geometry.location.lng 
    myForm.elements["lat"].value=lat 
    myForm.elements["lng"].value=lng 
//submit form 
    myForm.submit();  
      } else { 
//geocode failed 
      alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
     } 

Answer 2

はわずかマイケルの上で、残念ながら、箱から出して動作しないにコードを修正マイ。私は "地理的なクライアント側の隠れたフィールド"を検索するときにGoogleがこの投稿に私を連れて来るので、これを強調することが重要だと思う。私は$ _GETを使用する私のサイトから次のコードを直接取っていますが、どちらの方法でも動作します。私たちは、フォームを起動します。

<form type="get" id='codeForm' action='index.php'> 
<input type='text' name='search_location' id='search_location'> 
<input type='text' name='search_term'> 
<input type="submit" value="Search" id="submitform"> 
<input type='text' name='search_term'> 
</form> 

あなたが見ることができるように、私は、フォームからの隠し緯度とLNGの入力フィールドを離れて取り、下にjQueryを使ってそれらを追加しました：

<script type="text/javascript"> 
function codeAddress() { 
    myForm = document.forms["codeForm"]; 
    //get the address 
    var geocoder = new google.maps.Geocoder(); 
    var address = document.getElementById('search_location').value; 
    geocoder.geocode({'address': address, componentRestrictions:{country:"uk"}}, function(results, status) { 
     //geocode was successful  
     if (status == google.maps.GeocoderStatus.OK) { 
      //grab the lat and long 
      var lat = results[0].geometry.location.lat(); 
      $("#codeForm").append("<input type='hidden' name='lat' value='" + lat + "' />"); 
      var lng = results[0].geometry.location.lng(); 
      $("#codeForm").append("<input type='hidden' name='lng' value='" + lng + "' />"); 

      //submit form 

     } else { 
     //geocode failed 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 

$(document).ready(function() { 
    $('#codeForm').submit(function(e) { 
     var form = this; 
     e.preventDefault(); 
     codeAddress(); 
     setTimeout(function() { 
      form.submit(); 
     }, 1000); // in milliseconds 
     return false; 
    }); 
}); 
</script> 

重要なポイント私のコードについては、this postのおかげで、私はsetTimeoutの遅延を追加したということです。遅延がなければ、私は上記のミハエルの解決策の値が時間内に追加されていないことを発見しました。

脚注として、私は私のソリューションでjavascriptとjqueryの組み合わせを改善することができると知っていますが、重要なことは実際の例です。