Question

I have an html form and I want to embed google map so the user can pin point some location. After submitting the form how do I get the location?

Thanks

Answer 1

Although @zerkms gave a pointer to the correct information, that might not be enough. I’ve created a fiddle with a working example: to help. The basic parts are:

1. A javaScript function that uses the maps API to put down a marker where the user clicks (this is placeMarker)
2. A javaScript click handler for the submit button that prevents the normal form submit and records the current latlng of the marker in a hidden form field
3. An invocation of the normal form submit

Here is the placeMarker code:

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

And here is the jQuery code used for handling the submit:

$("#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();
});

Here’s the form I used:

<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>

The submitAction is not needed in production, I just wanted to show what happens with the values:

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

Hope this helps!