With the increase in popularity of road trips, determining the most cost-efficient route is important. It usually requires multiples websites and resources to gather all the information needed to calculate the approximate costs of a trip. The gas mileage for the vehicle, distance, fastest route, and gas prices all have to be known. It is an entirely inefficient process and thus it deters many people from becoming economically aware of their transportation. We wanted to simplify this process and integrate it with something everybody already uses to plan their trips; Google Maps.

What it does

FuelPlan is a Chrome extension that allows the user to learn about the fuel economy of their vehicle, and use that information to plan trips on Google Maps. Once the user selects their vehicle, it is saved to their Google account. When they search for directions on Google Maps (with the extension enabled), there will seamlessly presented with the fuel cost for all of the possible routes of their trip. The gas price is automatically retrieved but can be adjusted by the user. Additionally they can switch between vehicles to compare their fuel economies/trip costs, and make more environmentally conscious decisions.

How we built it

To retrieve fuel economy data for the vehicles, we used an API by We used jQuery in our Chrome extension to simplify the AJAX requests which we used to obtain the JSON data from the API. The becomes enabled when the user is on Google Maps and actively waits for the user to search for directions, then injects a new element to the route info. The form was designed using HTML/CSS to have a material, minimalist design.

Challenges we ran into

Throughout the Hackathon, there were various challenges we ran into especially in regards to brainstorming an idea. Thankfully, we were able to work around our challenges and successfully complete a project we are proud of. Prior to coming up with FuelPlan, we came up with many ideas that were either too complex or had already been done. We also encountered challenges building the extension. Making a chrome extension was new to both of us, so there was a bit of a learning curve. In addition, using Chrome's data storage was a challenge that we faced, as we did not want the user to re-enter values constantly. We were unsure of how to approach this in the beginning, however after researching we were able to implement this functionality in our chrome extension.

Accomplishments that we're proud of

We're definitely proud that we were able to successfully develop a project that provides relevant information to the user in a convenient manner. Our favorite part of the extension is how seamlessly it displays the information on Google Maps.

What we learned

Through our experience making this project, we learned how to work under a strict time constraint and create a relevant and applicable project. In addition, we learned how to work together with individuals at different skill levels and create an interdisciplinary application. Through this, we also gained exposure to chrome extensions, a relatively new concept for us.

What's next for FuelPlan

Going forth, we’d like to continue adding new features to FuelPlan. Under the time constraints, we were not able to use Google Maps' API to determine highway and city distances separately, but plan to implement this feature that use the vehicle's mileage for both highway and city, rather than using the combined gas mileage. This would yield a more accurate result. We also plan to make other minor improvements such as conversion between metric and imperial units. We hope to publish this extension to the Chrome app store in the near future!

Share this project: