Drâa Tafilalet Travel

Project Overview

Built as a university web development project, this travel agency website showcases the tourism offerings of Morocco's Drâa-Tafilalet region. Visitors can explore tour packages, browse hotel and restaurant options, check transportation services, and contact the agency through an integrated form. The Google Maps JavaScript API powers an interactive map pinpointing tour locations across the region.

Features

• ✓Interactive Google Maps integration with pinned tour locations across the Drâa-Tafilalet region
• ✓Hotel and tour packages with pricing and booking options
• ✓Restaurant and activity recommendations for travelers
• ✓Transportation services for easy travel arrangements
• ✓AJAX-powered contact form for inquiries and booking requests
• ✓Responsive design optimized for desktop and mobile devices

Challenges

• •Integrating the Google Maps JavaScript API and dynamically populating location markers from data
• •Designing a visually rich tourism site using only HTML, CSS, and Bootstrap
• •Coordinating a multi-person project with consistent styling across pages

Solution

Used the Google Maps JavaScript API to render an interactive map with custom markers loaded from a local data config. AJAX handles form submissions without page reloads. Bootstrap grid ensures responsive layouts across all device sizes.

Architecture

Static multi-page website. jQuery and vanilla JS handle interactivity and AJAX form submissions. Google Maps JavaScript API is initialized on page load and populated with tour location data from a local JSON configuration.

Results & Impact

• ✓Fully navigable multi-page tourism website showcasing the Drâa-Tafilalet region
• ✓Interactive map surfaces tour destinations at a glance
• ✓Responsive Bootstrap layout adapts cleanly across all screen sizes