Using the Google Maps Directions API to calculate distances

Posted on 17th May 2013

I covered in my post in August of last year how to get the distance between two sets of co-ordinates using the Google Maps API. The only problem with using the Haversine formula is that the distance calculated is “as the crow flies”. If, for example, you were finding the closest branch of a particular store chain, the closest branch “as the crow flies” might actually be further than another branch when driving there — there could be one-ways systems, rivers, restricted height bridges, etc. that affect the distance when travelling to a branch.

This article will use another of Google Maps’ APIs — the Directions API — to calculate the distance between two places using whatever mode of transport you choose (by default, driving).

Spring cleaning

Posted on 4th April 2013

You may have noticed the website has been redesigned. As happy as I was with the previous design when I launched it, as many others in the industry may agree, as a web designer it’s not long before you begin to notice things you want to change or improve, and the time eventually comes for another complete facelift.

The blog is now powered by WordPress instead of the previous content management system that I wrote myself. Although that was easy for myself to manage and customise, WordPress is definitely a better choice. I can rely on the plethora of features already available rather than having to develop them myself as and when I need them. Rather embarrassingly, this is the first time I’ve really used WordPress in anything other than a production environment. It’s great to have finally got my head around it and I will be using it for most CMS projects in the future.

I’ve removed a lot of the clutter of the previous website and focused on the main blog content to keep it simple. The site is now also fully responsive.

Thoughts and problems of responsive web design

Posted on 30th August 2012

Everyone in the world of web development is talking about responsive web design. If they’re not, they should be. If you haven’t yet joined the responsive revolution and begun to ensure your websites adapt to whatever device or screen resolution your users may be using, then it’s time to start. I’m not going to go into detail about the principal techniques of responsive design here as there are many resources available on the web, some of which I will provide links to below.

For the last few months, I have been implementing reponsive web design to all my web projects. I am always looking for ways to improve them, as well as keep up with the latest technology for providing content responsively, so I recently attended a great webinar, Optimizing Mobile Experience with Responsive Design, by Ektron.

The webinar has given me a lot of ideas, specifically about the “mobile first” methodology (more on that below). This article expresses my thoughts on the topics the webinar covered, as well as some of the general responsive web design techniques we use, and the potential problems that arise from using them on your web projects.

Getting the distance between two locations using Google Maps API and PHP

Posted on 16th August 2012

May 2013 Update: I’ve written a follow up post to this one, detailing how to find the distance between two locations using the Google Maps Directions API. I’ve also added the option to download the source code in full at the end of the post.

I wrote an article back in February on using the Google Maps API together with the W3C Geolocation API to show a user’s location on a map. The article was well received and I am going to build on the subject by going through how, with the help of Google Maps API once again, to find the distance between two locations; one of which could be found by using Geolocation as described in the previous article.

The method is actually quite simple; all we need to do is get the latitude and longitude co-ordinates of the two locations we want to find the distance between, and then using a mathematical formula, obtain the distance between them. These locations will depend on your application; they could be a user’s current location that is found using Geolocation, a town name, post/zipcode, or just a pre-determined set of co-ordinates – that part is up to you.

Opera’s supporting of the -webkit- prefix

Posted on 26th April 2012

There has been a lot of discussion over the last couple of months about other browsers implementing support of the CSS -webkit- vendor prefix, and this week an unidentified source told .net magazine that Opera have confirmed implementation of the -webkit- prefix.

Many developers are concerned. If other browsers start implementing CSS vendor prefixes other than their own, and implementing them in different ways (as often different browsers do), then surely that defeats the point of vendor prefixes entirely? The point of vendor prefixes was to ensure new, experimental CSS features are completely interoperable before standardised support was introduced. Some developers were initially against them, but most forward-thinking developers should now be used to using them to ensure the best cross-browser compatibility possible. Yes, it means we end up writing pretty much the same property declaration five or so times, but unfortunately that’s the way it is. Vendor prefixes are the best solution for us to be able to use experimental CSS properties now.

Using the Geolocation API together with Google Maps API

Posted on 13th February 2012

Although not officially part of the HTML5 specification, Geolocation has become one of a number of new technologies that have recently come to light with advent of HTML5. Remy Sharp and Bruce Lawson also felt it important enough to write a whole chapter about in their brilliant book, Introducing HTML5.

The Geolocation API is used to find the location of your users. You’ve probably noticed a similar technology on many apps used on smartphones — checking into places through Facebook or Foursquare, for example. The same can be done with most modern web browsers. When used in conjunction with the Google Maps API, you can get some pretty cool results and add some great features to your website or web apps.

It would help if you had a basic understanding of Javascript, jQuery and PHP for this article, but I try to explain everything, so it isn’t essential.