Google Map Drag and Save Location (by Felice Di Stefano)
This object is used to fine
tune the user location, if required, by dragging the marker to the desired position.
It will create a Google Map with a form to search a location which will show on
the map, then the marker can be dragged to grab the exact point if needed. The
search may be defined restricted to a specific country or worldwide.
The interface provides the necessary features to create a map with controls
and size on your taste and need.
This object is very easy
to apply and not restricted to a server support since is based only to client-side
script. The dialog provides some default values, based on the defined UK
country, to make you understand the use and make soon a test directly
from your machine and localhost server (assuming you have a Internet connection).
What you need is a Google Api Key, which you can get it here,
for each remote site you will gonna use, the default key can be
used only on your machine localhost server.
Applying
The purpose of this object
is explained above, mainly to save the user's location coordinates into the database.
You can do the same using the FX Google Map Insert/Update Coordinates behavior
when the address is well define but with this one you can give the user the possibility to well tuning his position and save his preferred map type and zoom level if you wish. This method helps a lot
when the user address is not very reliable like a street without the number
or even a location with no address. It may be appropriate on a user
profile update form.
To achieve that prepare the insert or update form providing 2 fields (better
if hidden, to avoid that users abuse your form) to hold the latitude and longitude
values then, if you wish, you may provide also two hidden fields for map type and zoom level (name these as you wish) and apply the Insert or Update behavior as usually.
Outside the form apply this object following the below directives. A button to show the location inserted in the location fields will be created and eventually a button to register the configuration.
| Google Key: | Insert the Api key you have got from Google for the site address you will use the map. |
| Map Size: | Define here the size of your map in width and height. |
| Specific Country: | Specify here the country you want to restrict the search. You may use the extended name or the short ie: United Kingdom or UK, Italia or IT, United States or US, etc., just care that the name is correct in english or native language. |
| Pan/Zoom Control: | Add or not the required Pan/Zoom control to the map based on the map size. |
| Map Type Control: | Add or remove the buttons that determine the map type (Normal, Satellite, Hybrid) from the display. |
| Scale Control: | Add or remove the scale display of the current map zoom. |
| Overview Control: | Add or remove the collapsible overview control in the bottom-right of the map. |
| Remove Type: | Checking any of these boxes you may remove a specific map type from the row of buttons. Note that if you are combining with registration or update form to retrieve a configuration on a results page, the allowed types must be the same on this map and the results map. |
| Add Ground: | Checking this box it will be added the Ground map type to the displayed buttons. Note that if you are combining with registration or update form to retrieve a configuration on a results page, the allowed types must be the same on this map and the results map. |
| Default Zoom: | Select the starting zoom of the map. |
| Reg. Conf: | Checking this box you allow the Register Configuration feature which applies a button on the page to give to the user the option to pass the prefered zoom and map type to field elements for registration purpose. Note that you may well combine this object with a registration or update form so that the user may fine tuning the marker posistion and save into database the preferred map type and zoom level. Then this data can be retrieved with the Google Map Show Resuts behavior. Obviously you must have in your database appropriate columns for latitude, longitude, map type and zoom level on your wish. |
| The fields which will hold coordinates | |
| From Form: | Select the form used for the insert or update action. |
| Latitude Field: | Select the field used to hold latitude. |
| Longitude Field: | Select the field used to hold longitude. |
| User Map Type: | Select the field to hold the selected map type. This field is enabled if Reg. Conf is checked. |
| User Zoom Level: | Select the field to hold the selected zoom level. This field is enabled if Reg. Conf is checked. |
| The fields for location | |
| Address Field: | Select the field where to insert the address. |
| Town Field: | Select the field where to insert the town. |
| Country field: | Select the field where to define the country. This must not be set if the Specific Country is defined. |
| Default
map coordinates You must insert coordinates for the starting map, the default are for London UK but you may change these as required. To get coordinates is included the Google Map Get Coordinates object which creates a form to retrieve location coordinates. Once you have retrieved the coordinates insert these in the Latitude and Longitude fields. |
|
Note: Please always check that the onLoad and onUnLoad events are inserted correctly in the <body> tag.
Conclusion
Before filling the insert or update form the user will check the location on the map, if satisfied can fill the form otherwise can drag the marker to the desired position and when satisfied fill the form.
by FELIXONE