New Website Launched to Find Attractions Between Two Places

November 12th, 2012 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, MySQL, PHP, SEO, Web Development.

For regular readers of this blog you might have guessed that I’m a huge fan of maps, and working inparticular with the Google Maps API. I also find that the best way to learn anything in the coding world is to use it in a real life scenario.

As a result, and to hopefully produce something that will prove useful for others, I’ve launched What’s En Route.

What's En Route Screenshot

Background

The idea came about after we climbed Mount Snowden. We left early the next morning, had a full day ahead of us, and wondered where we could go on the way back home to break up the three hour journey.

Short of searching for attractions in each town along the way (there were a LOT of towns), it was difficult to find something to do. A lightbulb went off in my head and I was on a mission to build a tool that I, and others, could use in the future.

The Design and Build

My initial thoughts when it came to scoping out the site were to allow the user to enter their starting point and destination, and to then simply output all the places in a linear list that fell between these two places. Easy, right? This could’ve been mocked up in a few hours and, as they say, “Bob’s your uncle“.

I found a couple of problems however with this method of displaying the results in a linear list.

  1. We don’t know which way the user is going to travel. They could take the motorway, or they could take the scenic route.
  2. It wouldn’t be immediately obvious whereabouts each attraction was in relation to their start and finish locations.
  3. It also wouldn’t be clear how far off-route the results were from the direct route.

I’m sure that the above points could’ve been overcome somehow. For example, I thought about using a progress bar next to each result to get around point 2; to display at which point of the journey the point of interest was. Nevertheless, using a map was my chosen interface as it easily got around the three points mentioned above.

I wanted the map to be the primary focus of the site and to use as much of the screen as possible to display the results. A thin header and footer were introduced, with the map taking up the full width. Any content that wasn’t immediately relevant was hidden away leaving the search box as the only other primary part of the site.

The Google Maps API was very straight forward to work with and allowed me to put my CodeIgniter Google Maps library to the test. I was especially impressed with the directions service built into the API and how easy it was to integrate.

Drag Directions To Update Results

Unfortunately the same can’t be said for the Places API however. I was initially relying on this to get the results shown on the map but they limit the places returned to 20 per API call. This wasn’t good enough to make it a useable tool so I decided to store and manually enter the attractions in my own database.

Usage

I wanted to make the site as intuitive and easy to use as possible. Simply enter your start location and destination (this can be a postcode, town or county) and the suggested directions will be instantly displayed on the map along with all the attractions on the way. The directions can be clicked and dragged if taking a different route and a user can click on the markers shown to get more information.

Improvements to the site will continue to be made and attractions will continue to be added to the database. In the meantime, all feedback is welcomed.

Visit What’s En Route

This entry was posted on Monday, November 12th, 2012 at 3:28 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, MySQL, PHP, SEO, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (2)
  1. @Yvonne – The only site I’m aware of in the US like this is http://roadtrippers.com. Never used it personally but it looks similar.

  2. Yvonne says:

    I’ve been searching for something like this in the USA…