php - グーグルマップで場所を送信

Question

HTMLフォームがあり、Googleマップを埋め込んで、ユーザーが特定の場所を特定できるようにしたいと考えています。フォームを送信した後、場所を取得するにはどうすればよいですか?

ありがとう

Answer 1

@zerkms は正しい情報へのポインタを提供しましたが、それだけでは不十分な場合があります。私は実用的な例でフィドルを作成しました: 助けるために. 基本的な部分は次のとおりです。

1. Maps API を使用して、ユーザーがクリックした場所にマーカーを配置する JavaScript 関数 (これは placeMarker です)
2. 通常のフォーム送信を防止し、マーカーの現在の緯度を非表示のフォーム フィールドに記録する、送信ボタンの JavaScript クリック ハンドラー
3. 通常のフォーム送信の呼び出し

placeMarker コードは次のとおりです。

function placeMarker(location) {
    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: mapInstance
        });
    }
}

そして、送信を処理するために使用される jQuery コードは次のとおりです。

$("#submitbutton").on("click", function(e) {
    // Prevent normal submit action
    e.preventDefault();
    // Collect current latlng of marker and put in hidden form field
    if (marker) {
        $("#latlngfield").val(marker.getPosition().toString());
    } else {
        $("#latlngfield").val("not entered");
    }
    // Show results for debugging
    submitAction();
    // Uncomment this for production and remove submitAction() call
    // $("#dataform").submit();
});

使用したフォームは次のとおりです。

<form id="dataform">
    <fieldset>
        <legend>Form Information</legend>    
            <label for="firstnamefield">First Name</label>
            <input type="text" name="firstname" id="firstnamefield"><br>
            <label for="lastnamefield">Last Name</label>
            <input type="text" name="lastname" id="lastnamefield"><br>
            <input type="reset" name="reset" value="Clear">
            <input type="submit" name="submit" id="submitbutton" value="Submit Data">
            <input type="hidden" name="latlng" id="latlngfield">
    </fieldset>
</form>

submitAction は本番環境では必要ありません。値で何が起こるかを示したかっただけです。

function submitAction() {
    alert("Value of firstname is " + $("#firstnamefield").val());
    alert("Value of lastname is " + $("#lastnamefield").val());
    alert("Value of latlng is " + $("#latlngfield").val());
}

お役に立てれば！