ParkEase 3D Locator

A web app that harnesses user input with Google Photorealistic 3D Maps to refine car park entrances, visualize updated routes in real-time, and further improve Google Maps place-related APIs.

Comment

Inspiration

The inspiration behind ParkEase 3D Locator was to tackle the challenges faced by drivers when navigating complex parking areas with inaccurate parking entrance data using Google Maps. By combining Google Photorealistic 3D Maps and user input, we aimed to create a more interactive and user-friendly system that can also enhance Google Maps APIs.

What it does

ParkEase 3D Locator enables users to:

  • Search for destinations within a predefined area.
  • Visualize routes and destinations in real-time using both 2D and 3D maps.
  • Update entrance markers on the 3D map, dynamically recalculating routes.
  • User feedback to improve navigation data and enrich Google Maps APIs.

How we built it

The project was built using:

  • Frontend: HTML5, CSS3, and JavaScript (ES6+), with files stored in the public/ folder.
  • Backend: Node.js with Express.js for serving files and managing API keys securely.
  • Google Maps APIs: Integrated Google Maps JavaScript API, Places API, Directions API, and Photorealistic 3D Maps Library for mapping and navigation features.
  • Development Tools: npm for dependency management and a local Node.js server for hosting.

Challenges we ran into

  • Configuring Google Maps 3D Library for seamless integration with existing APIs.
  • Ensuring accurate user feedback visualization on 2D and 3D maps.
  • Managing dynamic updates to routes when new marker were added.
  • Newbie in front-end development with limited experience in JavaScript.

Accomplishments that we're proud of

  • Successfully integrated photorealistic 3D maps into the application.
  • Enabled real-time route updates based on user input for car park entrances.
  • Developed a responsive UI for both 2D and 3D map interactions.
  • Leveraged user feedback to create a potential data source for improving navigation systems.

What we learned

  • Advanced usage of Google Maps APIs, including their 3D visualization capabilities.
  • Best practices for securing API keys in Node.js applications.
  • Building user-centric navigation tools that balance interactivity and simplicity.

What's next for ParkEase 3D Locator

  • Storing user feedback in a database for future analysis and improvements.
  • Improving UI for ease of use (e.g. add helper panel for user instructions).
  • Adding support for multi-modal navigation (walking, biking, etc.).
  • Expanding the application to support global locations and multiple languages.
  • Enabling real-time collaboration, allowing multiple users to provide feedback simultaneously.
  • Integrating AI-based suggestions for optimal car park entrance placement.

Built With

Share this project:

Updates