Plot Button to Add Latitude and Longitude to input

Question

I have a form and one of my inputs lets my user input their office location (address)

From this address I want to plot a google map on their profile. I would like them to supply the long's and lat's but they will have no idea how. Is there a way the user can populate the long and lat fields by entering an address into the address field and then pressing a plot button which will return the long and lats and input them into the appropriate fields.

My code so far is as follows (I made a JSFiddle to avoid putting a lot of code within this message)

http://jsfiddle.net/F2snX/

A snippet of 1 location is as follows (But better to see full jsfiddle example)

<li id="field_15_92" class="gfield">
<label class="gfield_label" for="input_15_92">Solicitor Practice Address</label>
    <div class="ginput_container">
        <input id="input_15_92" class="medium" type="text" tabindex="3" value="" name="input_92">
        <input type="button" id="plot1" value="Plot" /><br />
    </div>
<div class="gfield_description">Enter Address Location and Press Plot Button </div>
</li>
<li id="field_15_166" class="gfield">
<label class="gfield_label" for="input_15_166">Main Practice Opening Hours</label>
    <div class="ginput_container">
        <input id="input_15_166" class="medium" type="text" tabindex="4" value="" name="input_166">
    </div>
<div class="gfield_description">Enter Office Opening Hours</div>
</li>
<li id="field_15_167" class="gfield">
<label class="gfield_label" for="input_15_167">Main Practice Map Longitude </label>
    <div class="ginput_container">
        <input id="input_15_167" class="medium" type="text" tabindex="5" value="" name="input_167">
    </div>
<div class="gfield_description">Enter Longitude Coordinates</div>
</li>
<li id="field_15_169" class="gfield">
<label class="gfield_label" for="input_15_169">Main Practice Map Latitude</label>
    <div class="ginput_container">
        <input id="input_15_169" class="medium" type="text" tabindex="6" value="" name="input_169">
    </div>
<div class="gfield_description">Enter Latitude Coordinates</div>
</li>

Thanks

Note: My Wordpress theme is using Google Maps API v3 if that helps with anything.

Answer 1

There are basically two ways how you can approach this problem:

1. Let the user enter an address and find out the geocoordinates yourself. See the description of the Geocoding API for a full feature set.

2. Or you draw a draggable marker on the map and let the user drag the marker to their location. You can find a good explanation in this posting.

3. Or you combine the two apporaches. Let the user enter their address, and if the geocoding result is somehow not sufficient, they may drag the marker to the correct location. Here is an example by Google that exactly does this.