How to use Google’s Geocoding and Maps APIs with PHP and MySQL

Preamble

Recently I had a requirement from a client to be able to display numerous different Google maps on their website. “Simple” you might say – just use the Google Static Maps API to generate each map, and you’re done. Well, it wasn’t quite that simple. The client basically wanted to be able to generate maps on the fly, using addresses stored in a database. They then wanted to be able to pinpoint the exact location of the property using a marker. In order to be able to do that, not only do you have to give Google an address and postcode to centre the map on, but you also have to give it a Latitude and Longitude (lat/long) pair to generate the marker. To this end, I’d built a bespoke Content Management System for them, using PHP and MySQL, which enabled them to add properties to the database then display them on the site. The details stored for each property included Property Name, full address, postcode, lat/long co-ordinates etc. The client wanted it to be as easy for them to add a property as possible (don’t they always?) So the last thing they wanted to do was manually work out the lat/long for each property. So I had to build a feature into the system for them. So what would happen was:

  1. The client would input the full address, and click a ‘Save’ button to save the details to the database
  2. The system would send the address to Google’s Geocoding API (http://code.google.com/apis/maps/documentation/geocoding/)
  3. The API would return the data either as JSON or XML
  4. The system would extract the lat/long pair from the returned data, and save it into the database record for the property.

Now I’m going to show you how I did it. Hopefully it will save you some time!

How I dunnit

Step 1: Geocoding the address In the end, it was really quite simple. I used a PHP library called CURL (Client URL Library: http://php.net/manual/en/book.curl.php) to send the address data to the API. But first I had to format the address so that the API could accept it. The API requires the data in the following format:

http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true_or_false

You’ll see that all spaces in the address have to be replaced with a plus (+) sign Now, the address data I was going to use had been posted to this script, so the first thing I had to do was to go through the string, and replace all of the + signs. I did this automatically using PHP’s handy str_replace:

str_replace(" ","+",$_POST['addr1']);

For non-PHP coders, what the above is doing is the replace all spaces (denoted by ” “) with pluses in the data from a field in my form called ‘addr1′. I then created a PHP variable which would hold the data $addr and did the str_replace thing on all of the address data that I needed to format. I also concatenated it together into a single string:

$address = str_replace(" ","+",$_POST['addr1']) . ",+" . str_replace(" ","+",$_POST['addr2']) . ",+" . str_replace(" ","+",$_POST['towncity']) . ",+" . str_replace(" ","+",$_POST['postcode']) . ",+UK";

Then came the good bit; using CURL to send that to Google’s API. Here’s the code I used:

//Query Google Geocoding API
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://maps.googleapis.com/maps/api/geocode/xml?address=".$addr."&sensor=false");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$xml = curl_exec($ch);
  • The first line, curl_init() simply initiates the CURL library
  • The second line (curl_setopt($ch, CURLOPT_URL…) sets the address that the data is to be sent to, and includes the formatted $address variable that we created earlier. The last parameter, ‘sensor’ is set to false. As I understand it, if you set that to true, this API can be used with GPS-enabled devices such as smart phone to give directions from the phone’s current location. But in our case, this wasn’t needed so I set it to false. It must be set to either true or false – it can’t be left blank.
  • The third line, (curl_setopt($ch, CURLOPT_RETURNTRANSFER…) tells the CURL library to return the data to a variable; in this case $xml on the…
  • Fourth line:
    $xml = curl_exec($ch);

So at this point, I had a variable called $xml, containing an XML-formatted string of data which had been returned from Google’s API. Sweet. What I needed to do next was read the XML, and extract the bit I needed, the latitude and longitude co-ordinates. I did this using the following code:

//Use SimpleXML library to get the data from the XML string
$xml = new SimpleXMLElement($xml);
$lat = $xml->result[0]->geometry[0]->location[0]->lat;
$lng = $xml->result[0]->geometry[0]->location[0]->lng;
$coords = $lat . "," . $lng;
curl_close($ch); //Close the CURL instance, to keep things tidy

All this did was to read the XML string into an instance of the SimpleXML library. The code on lines two and three just iterated through the XML structure until it came to the data I wanted. I stored that in two variable called $lat and $long, which I then concatenated into one variable on line 4, $coords. Lastly for this step, I stored the $coords in my database record for the property, using a standard SQL query similar to the following (thought this example is shortened): “INSERT INTO properties (coords) VALUES (‘$coords’)” Step 2: Using the geocoded data to create the marker This bit’s the easy bit. You just create an <img> tag, and give it a src attribute which includes the postcode (so the map has somewhere to centre on), and the lat/long co-ordinates for the marker:

<img class="border" src="http://maps.google.com/maps/api/staticmap?center=<?=$postcode;?>&zoom=15&size=198x198&maptype=roadmap&markers=color:red|label:A|<?=$row['coords'];?>&sensor=false" alt="" />

<?=$postcode;?> would be replaced with the postcode of the property
<?=$row['coords'];?> would be replaced with the value I saved in the database record. In the case of this example, it’s 40.711614,-74.012318

This breaks down as follows: http://maps.google.com/maps/api/staticmap = The API reference that tells it to use the Static Maps API center = postcode (of the property, so the API knows where to centre the map) zoom = the zoom level of the map. I think this can be between 1 (zoomed right in) to 20 (zoomed right out) size = the size (in pixels) of the <img> maptype = roadmap (can also be satellite, terrain or hybrid) markers = color:red|label:A|<coords> – Set s the label color, style (alpha or numeric) and the co-ordinates at which to place the marker.
More info on all of this can be found here: http://code.google.com/apis/maps/documentation/staticmaps/

This gives you something like:

Ta da! Pretty sweet , yes?

So hopefully you can see how to: a) Take a full address and postcode, and use it to generate a pair of lat/long co-ordinates b) Use those co-ordinates, along with the postcode, to display a map of the area, along with a marker showing the exact, accurate location of the property.

It’s not an easy process to understand, or to do, but I hope it helps someone out there. Otherwise, you’re welcome to ask me to do it for you!

Previous post:

Next post:

OUR SERVICES

  • Logo and branding design
  • Web design and development
  • Wordpress and Thesis development
  • Bespoke and open-source e-commerce solutions
  • E-marketing
  • Search Engine Optimisation (SEO)
  • Stationery design and print

Read more...

TESTIMONIALS

"Choosing a suitable website is not an easy decision. CK Services were very responsive and helped us in making the right decisions and we are delighted with the results. We have received lots of compliments from customers and feel that the site has enhanced our business."
Trevor Black, Blackwolds Consultancy

"CK Services provide us with all our web development on an ongoing basis. They have a wealth of experience which has saved us so much money on wasted exercises over the years. I wouldn't use anyone else for my website development"
Viviane Morris, Much Loved People.com

"CK Services have delivered not only an attractive and effective website but subsequently a fast, efficient and very friendly customer focused support service. They never tire of our lack of technical knowledge and are always keen to resolve all our requests."
Julie Gough - Mapping Solutions

"The web package I chose was really affordable for my small business. CK Services undertook the site design, hosting and search engine optimisation. I chose a template and images, wrote the page content and they did the rest. The web design is technically very good, the layouts and drafts were produced very quickly and all changes that I requested were undertaken promptly. "
Ebby Yarrow - Yarrow Safety

"CK Services gave good advice and listened to my requirements before recommending a number of web site designs to choose from. Once one was choosen they worked hard to set it up exactly how I wanted it. I found them to be friendly, reliable and very helpful and I would strongly recommend them to anyone in the future."
Richard Reah - North of England Bonsai.

"CK Services have been very professional and extremely prompt with their service. I wanted a very personal website to suite my new holiday cottages and after asking a few companies, CKS was the only company which had imagination enough to help me. They were open to my ideas and also gave a lot of well-needed input. Fantastic people to deal with, I would highly recomend them to anyone and everyone!"
Jessica Barker - Thief Hole Cottages.

"CKS responded very well to our needs, fully understanding what we were trying to achieve. I asked them to design our new logo and they very patiently worked with us until we got it just right! We've also used CKS for printing our business cards and letterheads and again very pleased with the quality and response we've had."
Mark Sanchez-Garcia - The Sanchez-Garcia Partnership.

"It's been brilliant working with CK Services again. They are great at finding swift solutions to tricky technical issues and I'm particularly impressed that they created everything we needed by my very short deadline."
Julie Gough - Marketing and Communications Manager, Wildlife Trust for Sheffield and Rotherham.

FROM THE BLOG

PSD to HTML5

HTML 5 is here. It's the 5th major revision of the HTML coding language which is used to create all websites. We're pleased to offer a PSD to HTML5 conversion service. We have years of experience i ...

Read more...