Add Marker To Map From User Input Fields

[Chris Prodger]

Hi,

 

I wonder whether someone may be able to help me please. I'm very new to Google maps and geocoding and I must admit the 'Google Searches' ' I've made over the past few weeks have only confused me even more, so please bare with me. 

 

I have an SQL database which amongst many, conatins a table whereby users can enter address details in the following fields via an HTML form:

 

House Number or Name

Street

Village

Town

City

County

Postalcode

 

What I would like to do, if at all possible, is for the user to be able to then click a 'Search' button which then navigates the map to that location, adding a marker at the same time.

 

Ideally, I would then like to have an additional function whereby the user is able to fine tune the marker position by way of a draggable marker, which updates the original address details entered, with the user then able to save the location by way of a 'Save' button.

 

Could anyone tell me please whether this is possible, and where there may be some 'Idiot proof' tutorial or information that may be able to guide me through the process.

 

Many thanks and regards

 

Chris

[meetamit]

Chris,

Did you look at Google's documentation of their geocoder (http://
code.google.com/apis/maps/documentation/geocoding/)?
That should have all the info you need in order to query for the Lat/
Lng of the user-entered address.

You'll need to do something like this:

requestJSON = {
address: houseNumber + " " + street + " " + city + " " +
postalCode /* these would be the user-entered values in your form */
}
geocoder.geocode(requestJSON, function(results, status) {
// This executes when the results come back from google
// here you'll need to extract the lat/lng from 'results' then
call map.setCenter() or something like it
// in order to position the map at the address
});

Note that the geocoder's results are an array, and could possibly have
more than a single item. This happens if the user-entered data happens
to be ambiguous. Then you'll have to either pick the first result (ie
results[0]) and hope that it's good enough (usually it is), or you'll
need to implement a "which one did you mean?" view for such scenarios
(complicated).

Also note that the geocoder will tell you the lat/lng of the address
on which you'll center the map, but you'll need to pick the zoom level
you want to display it at. You could go with a fixed, hardcoded zoom
level, or you could get fancy and extract the zoom level out of the
result's bounds (found under results[0].geometry.bounds). That latter
option is possible only when the bounds are available for the address
entered (usually they are, not always).


Regarding the ability to drag the marker to refine the results. You
can read about how to do it here (http://code.google.com/p/gmaps-
samples-v3/source/browse/trunk/draggable-markers/draggable-
markers.html?r=49).

Personally though, I would recommend not trying to do that, simply
because there is no way that via a pin drag you'd be able to extract a
more accurate address than what the user originally entered (assuming
the user entered a house number and street name). Most often, when you
lookup the address at a given lat/lng (i.e. that lat/lng that you'd
get from the marker after the user drags it) you get back a set of
results with various levels of accuracy -- from country down to street
address, if available. But often, the street address is a range, like
"235-265 Broadway St".

Of course you can still let the user drag a marker in order to tweak
the POSITION (i.e. lat/lng) which you'll save along with the user-
entered address. I'd just avoid trying to overwrite this user-entered
address.

[Chris Prodger]

Hi,

 

Many thanks for replying to my query with the guidance and links.

 

I'll take a look at the documentation you suggest.

 

Many thanks once again and kind regards

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.