Google Maps Suggest – Address-Autocompletion with Scriptaculous

Many uses autocompletion on their website. It’s not only an impressiv but also a very user-friendly feature. It can also help to have valid data within a form. But you always have to validate the data on the server before saving them.

Today I want to show you, how easy you can create a autocompletion for Google-Maps-Addresses using Scriptaculous. As you can’t access an external website with an AJAX-Request, we have to use a small Skript as a gateway between Google Maps an your website. So let’s start with this server-side script this time:

$json = json_decode(file_get_contents('http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&hl=de&key=YOUR_GOOGLE_MAPS_API_KEY&q='.urlencode($_REQUEST['address'])));

echo '
<ul>';
if(!empty($json->Placemark)){
	foreach($json->Placemark as $value){
		echo '
	<li>'.$value->address.'</li>
';
	}
}
echo '</ul>
';

We send a search query to Google Maps using the “q” parameter for the text we want to search for. The “output” parameter defines the data format we want to receive from Google Maps. In this example I use JSON and convert the data into an object using the json_decode() function. But you can also use XML and the simplexml_load_string() function. But as JSON is a much more compact format, I decided to use it for this example.

Another interresting parameter is “hl” which defines the language of the addresses. You might have recognized this parameter using the Google Search. In this case the addresses are returned in German. With this parameter you can quickly change the language of the function for your site.

To be able to set a request to Google Maps, you’ll need a free Google Maps API Key, which you have to add to the “key” parameter (Thanks to paddy who pointed me about the missing key in my example).

After receiving the data from Google Maps and having them converted to an object, we return it to the JavaScript function. In doing so we create a simple unsorted list with one entry per address.

And now we come to the very extensive client-side script. We have to create a form with a text field. We also need a DIV in which the results are shown. Finally we need a JavaScript function that handles the AJAX-Request and the output of the data. Sounds complicated but infact it’s very easy:

<input type="text" id="address" name="address" />
<div id="adresse_choices" class="autocomplete"></div>
<script type="text/javascript">
	new Ajax.Autocompleter('address', 'adresse_choices', 'get_addresses.php');
</script>

The hole things can be done with only a single line of JavaScript code. Of course you have to include the “prototype.js” and the “scriptaculous.js” in the head before. The Ajax.Autocompleter() function is part of the Scriptaculous API. The final result looks like this:

The example address ABC-Straße (ABC-Street) isn’t a joke. It’s the address of Google in Germany. Another nice feature of Google Maps is the spell checking. If you e.g. search for “plazt der luftblöcke”, you will succeed in finding the pace in front of the historic German city airport in Berlin. To test the funcionality you can use the little example page. You can also download the source code. I also added a function to the example that highlights the search string:

Example
Download

As you can see, with the help of the Ajax.Autocomplete() function and a server-side script, it is very easy to use data from another site. The PHP script can easily be customized to the remote datasource and its data format. You can also use a similar function from jQuery or other frameworks. But in this case you might have to change the returned data form the PHP script, too.

I hope this example could show you, how you can use autocompletion in many diffrent cases. Do you already worked with external data. Or do you have an idea, but you couldn’t realize it, yet? I would be happy if you leave a comment.