- Web Development
- Google Maps Development
Map Tool and Airline Hub
I undertook a big development project for Your Corporate which is the corporate arm to the Your Travel Group business towards the end of last year. The team there wanted to build out the airline section of their website and turn it into an Airline hub, they also wanted to create an innovative new map tool on their destinations page which links to the airline pages. Using a Google maps API and many hours of coding, I built a world map with search functionality and markers showing hundreds of airports across the world with pop up information boxes listing the major airlines who service those airports and allowing the user to then click through to that airline page. This was a big and complex project but one that needed to produce a very simple and effective user experience. I built out the individual Airplane page template showcasing each airlines key features, cabin imagery and more, I then built out the airline hub page which lists all the airline logos in alphabetical order, each linking to their corresponding airline page.
The Map Tool
Using the Google Maps Places API and many hours of coding, I set up the search functionality to autocomplete only city locations, users can then select the city and are zoomed into that city on the map below, here there will be a marker(s) showing airports in that location, red markers show direct flights and blue markers show indirect flights, either hovering or clicking on a marker will display the information box listing the airlines which service that airport, I made these links so the user can click straight through from there to the airline page. Users can also use the map without the search functionality; due to the sheer number of markers that were needed, I incorporated cluster markering functionality into my code to group markers together, from a zoomed out view (default) there are a number of markers across the map, each with a number on representing the number of markers within that area, users can click on a marker and will be zoomed into that area, at which point the markers split out and you see all airport markers in that section of the map.
This was a great project, it was failry complex, particularly to ensure the map worked and looked good on mobile as well as desktop. Thankfully, the map tool and airline hub look and work brilliantly, it was a great idea from Your Corporate who were really pleased with the end result, which has really given them a unique and engaging way of presenting the information to the user, in a way that is relevant to and personal to each individuals need’s.
Visit the pages to see the map and airline pages in action
- Map Tool: https://corporate.yourtravelgroup.co.uk/destinations/
- Airline Hub: https://corporate.yourtravelgroup.co.uk/airlines/