Author: Manuel Lemos
Viewers: 581
Last month viewers: 203
Package: PHP Forms Class with HTML Generator and JavaScript Validation
The forms generation and validation class map location plug-in has been enhanced to help users locating an address or a city on Google Maps embedded in PHP generated Web forms.
This article explains how the maps location plug-in uses the Google Maps Geo-Coding API to find locations entered by the users in Web forms.
This article explains how the maps location plug-in uses the Google Maps Geo-Coding API to find locations entered by the users in Web forms.
Contents
- Using Google Maps Geo-Coding support to find locations
- Setting up the form for searching an address
- Live examples
- Using Google Maps Geo-Coding support to find locations
Sometimes it is necessary to get the coordinates of a location on the map. The map location plug-in lets the user point to any location by clicking on the map.
The plug-in generates JavaScript that captures the clicked point latitude and longitude coordinates and assigns the values of form fields, so the coordinates can be passed to the PHP application when the form is submitted.
However, when the user does not know exactly where is the location he is looking for, it may be painful to find it just by zooming and looking around the map.
The latest release of this plug-in makes possible for the users to type the address or name of the city you are looking for and search for the location without further effort.
- Setting up the form for searching an address
To take advantage of this feature, besides adding the map location input to the form, you need to also add a separate text input for the location address and optionally another input to restrict the search to a given country selected by the user.
$form->AddInput(array(
"TYPE"=>"textarea",
"ID"=>"address",
"NAME"=>"address",
"COLS"=>60,
"ROWS"=>3,
"LABEL"=>"<u>A</u>ddress:",
"ACCESSKEY"=>"A",
"VALUE"=>"",
));
$form->AddInput(array(
"TYPE"=>"select",
"ID"=>"country",
"NAME"=>"country",
"VALUE"=>"",
"OPTIONS"=>$country_codes,
"LABEL"=>"<u>C</u>ountry:",
"ACCESSKEY"=>"C",
));
Then you use the forms class Connect() function to make the class generate the necessary Javascript to initiate the search for the address entered by the user when the address input is changed.
$form->Connect("address", "map", "ONCHANGE", "LocateAddress", array(
"Address"=>"address",
"Country"=>"country",
"CountryValue"=>"SelectedOption"
));
If you prefer, you may use an additional button input to trigger the search only when the user clicks on it:
$form->AddInput(array(
"TYPE"=>"button",
"ID"=>"locate_address",
"NAME"=>"locate_address",
"VALUE"=>"Locate address",
));
$form->Connect("locate_address", "map", "ONCLICK", "LocateAddress", array(
"Address"=>"address",
"Country"=>"country",
"CountryValue"=>"SelectedOption"
));
As you may note, the $context array argument of the Connect function passes the "Address" and "Country" parameters. Those are used to tell the map location input from where it will take the address and country names that will be used to perform the search.
"CountryValue" is a special parameter that tells the map location input how to retrieve the name of the country to be searched. The "SelectedOption" value should be used when the country input is of type "select". Otherwise, set it to "Value".
That's it! When the search is performed, an AJAX request is sent to Google Maps Geo-Coding API, thus avoiding page reloading.
The location marker and the map are moved to the coordinates of the location that was found. Currently, nothing happens when no location with the given name was found.
- Live examples
Take a look at the test_map_location_input.php example script to try this in practice. You can also see a live example in this page:
There are some real applications of the map location search functionality.
PHP user group submission page:
PHP professionals directory profile submission page:
Feel free to post comment if you have any questions.
- Using Google Maps Geo-Coding support to find locations
- Setting up the form for searching an address
- Live examples
- Using Google Maps Geo-Coding support to find locations
Sometimes it is necessary to get the coordinates of a location on the map. The map location plug-in lets the user point to any location by clicking on the map.
The plug-in generates JavaScript that captures the clicked point latitude and longitude coordinates and assigns the values of form fields, so the coordinates can be passed to the PHP application when the form is submitted.
However, when the user does not know exactly where is the location he is looking for, it may be painful to find it just by zooming and looking around the map.
The latest release of this plug-in makes possible for the users to type the address or name of the city you are looking for and search for the location without further effort.
- Setting up the form for searching an address
To take advantage of this feature, besides adding the map location input to the form, you need to also add a separate text input for the location address and optionally another input to restrict the search to a given country selected by the user.
$form->AddInput(array(
"TYPE"=>"textarea",
"ID"=>"address",
"NAME"=>"address",
"COLS"=>60,
"ROWS"=>3,
"LABEL"=>"<u>A</u>ddress:",
"ACCESSKEY"=>"A",
"VALUE"=>"",
));
$form->AddInput(array(
"TYPE"=>"select",
"ID"=>"country",
"NAME"=>"country",
"VALUE"=>"",
"OPTIONS"=>$country_codes,
"LABEL"=>"<u>C</u>ountry:",
"ACCESSKEY"=>"C",
));
Then you use the forms class Connect() function to make the class generate the necessary Javascript to initiate the search for the address entered by the user when the address input is changed.
$form->Connect("address", "map", "ONCHANGE", "LocateAddress", array(
"Address"=>"address",
"Country"=>"country",
"CountryValue"=>"SelectedOption"
));
If you prefer, you may use an additional button input to trigger the search only when the user clicks on it:
$form->AddInput(array(
"TYPE"=>"button",
"ID"=>"locate_address",
"NAME"=>"locate_address",
"VALUE"=>"Locate address",
));
$form->Connect("locate_address", "map", "ONCLICK", "LocateAddress", array(
"Address"=>"address",
"Country"=>"country",
"CountryValue"=>"SelectedOption"
));
As you may note, the $context array argument of the Connect function passes the "Address" and "Country" parameters. Those are used to tell the map location input from where it will take the address and country names that will be used to perform the search.
"CountryValue" is a special parameter that tells the map location input how to retrieve the name of the country to be searched. The "SelectedOption" value should be used when the country input is of type "select". Otherwise, set it to "Value".
That's it! When the search is performed, an AJAX request is sent to Google Maps Geo-Coding API, thus avoiding page reloading.
The location marker and the map are moved to the coordinates of the location that was found. Currently, nothing happens when no location with the given name was found.
- Live examples
Take a look at the test_map_location_input.php example script to try this in practice. You can also see a live example in this page:
meta-language.net/forms-examples.ht
...There are some real applications of the map location search functionality.
PHP user group submission page:
phpclasses.org/submit_user_group.ht
...PHP professionals directory profile submission page:
phpclasses.org/professional_profile
...Feel free to post comment if you have any questions.
You need to be a registered user or login to post a comment
Login Immediately with your account on:
Comments:
No comments were submitted yet.