The tourism office of the Deputation of Barcelona tasked us with making an interactive map to showcase top touristic spots around the province, for their Barcelona is much more website. The map was located at the home, in the section Close to Barcelona, Do not miss out!

The basic requirement was that it had to be a 100% client-side solution (since we wouldn't have access to their servers), the map needed to be easily embeddable anywhere on the site, and it needed to have as few dependencies as possible.

The result is a single script which, once invoked, it loads the rest of the needed files dynamically (styles, translation files, images, etc.), it builds the interactive map using the Google Maps API, and it inserts it in the desired container (via a configurable CSS selector).

My work in the project:

• Functional analysis and complete development of the solution.
• Direct communication with the client to integrate their feedback into the development process.
• Technical training for the IT team at the Deputation on how to set up and integrate the map.

Notable features:

• Interactive info cards for the touristic top spots on the map.
• 100% responsive design, with specific touch-enabled behavior for mobile devices.
• Efficient multilanguage management respecting the page language (via the document's "lang" attribute).
• Dynamic dependency loading system (the main script loads all other needed files at runtime: stylesheets, translation files, images, etc.).

Note: after the latest update to the Barcelona is much more website, the map is no longer online. You can take a look at how it worked right below.

A partially working version can also be seen in the Internet Archive's Wayback Machine, link in the project's data card.