Google maps makes it very easy to add a map to any page - but it's not so easy to extract meaningful address data from what Google returns. The goal of this article is to help you do three things.
Article Goals
- Send a string to Google Maps
- Parse the response Google returns
- Do something useful with the parsed response data
I've created a simple jQuery plugin called jquery.parseaddress.js that will help us along. I'll go through and explain what it's doing further below.
What You'll Need
- A Google Maps API key - Get one here
- The latest version of jQuery - Download it
- The parseaddress jQuery plugin - Download Demo Bundle
Example Usage
Here's an example HTML page using the parseaddress plugin. Feel free to use this with your own experimenting.
<html> <head> <title>Google Maps Address Parser - jQuery Plugin</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="parseaddress.jquery.js"></script> <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA9Hrr6tkKuGxfRHuyIpietBQ7Xg9Ta2yeHpAqGBGjsEdHdZsJLRTluI9qA-Kn-VHt_6Rh6NRVWIR6Ew" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ // use parseaddress plugin on an element, send response to callback function $("#addressinput").parseaddress(callback); }); // function to execute on callback to do somethng with the returned address data var callback = function(cleanaddress) { console.log(cleanaddress['street']); console.log(cleanaddress['city']); console.log(cleanaddress['state']); console.log(cleanaddress['country']); console.log(cleanaddress['zip']); console.log(cleanaddress['lat']); console.log(cleanaddress['lon']); } }); </script> </head> <body> <form> <label>Address:</label> <input type="text" name="address" id="addressinput" /> </form> </body> </html>
How It Works
The following bit of jQuery basically says, whenever the browser is ready, execute the following code. This makes sure that your javascript only gets executed after your page has fully loaded.
$(document).ready(function(){ });
Next we call the actual jQuery parseaddress plugin function on an element in the document.
$("#addressinput").parseaddress(callback);
This uses jQuery to find the element with the css ID of addressinput and then calls the parseaddress function on it. Notice we're also sending the variable named callback to the parseaddress function. This is important, as this is the function that gets passed in to handle what we do with the data Google Maps returns.
Next we need to create the callback variable, which is actually a function. You can put whatever you want inside this function - I just chose to output the contents of the returned address to the javascript console.
var callback = function(cleanaddress) { console.log(cleanaddress['street']); console.log(cleanaddress['city']); console.log(cleanaddress['state']); console.log(cleanaddress['country']); console.log(cleanaddress['zip']); console.log(cleanaddress['lat']); console.log(cleanaddress['lon']); }
Last but not least, we need a form on the html page to collect the address string from that we want to send to Google Maps. Here it is:
<form> <label>Address:</label> <input type="text" name="address" id="addressinput" /> </form> <a href="#" id="submit">click me</a>
This form has only one field, an input with the id of addressinput. If you remember, we attached the parseaddress() function to that element in our javascript. The link below is the function that we wrapped around it so we can activate it.
And that's it! Please let me know if you have any thoughts or questions.
