3D MAP POSTCARD

3D MAP POSTCARD - It’s an Easy-to-Use Interactive Postcard & AI Chatbot
Start by Entering a Place or Address to Explore or Share - 3D MAP POSTCARD is powered by Google Maps, Gemini & Gmail.
Start by Entering a Place or Address to Explore or Share or ask PIstachio Gelato near me?
Users can explore 3D maps and send postcards via email with dynamic content about their current location and explored places.
Share favorite locations with friends and family, adding personal messages and stories. +Explore & Repeat!
he email will generate a cut-out postcard of your place and Gmail will open with a link to your 3DMAPPostcard & Click Send.
Two code scenarios were explored and documented with goal of auto-generated screenshot of the Dynamic Postcard Map.
Gemini 1.5 Flash Chatbot Integration is layered on the map to answer questions about the location to enhance the immersive experience.
The chatbot offers real-time, location-specific insights, enhancing the user experience and offering relevant details based on the area.
3D Map Postcard Benefits - accessible and enjoyable for everyone to experience, regardless of their technical skills or age.
3D MAP POSTCARD is powered by Google Maps, Gemini 1.5 Flash & Gmail.
What's Next for 3D MAP POSTCARDS?
Please leave feedback! Thank you! - Noor, Taha & Vale

3DMapPostcards: Share the World, Your Memories & Plan Adventures

Inspiration "In a world increasingly dominated by digital interactions, we wanted to create something that fosters genuine human connection, is accessible and enjoyable for everyone to experience, regardless of their technical skills or age.” - Noor, Taha & Vale

What it does: This project integrates interactive elements like postcards and real-time chatbots, offering a visually engaging and informative experience on the Google 3D Maps platform.

How we built it: This project uses HTML, CSS, Gemini 1.5 Flash and JavaScript to create an interactive map experience. The goal was to create a user-friendly, engaging interface for users to explore places, interact with friends and family via 3D Map Postcard emails, and get real-time information about their destinations. Key functionalities include the interactive postcard feature, real-time chatbot integration, and an attempt to implement an auto-screenshot functionality (which was limited by browser policies)

Key Features:

Interactive Postcard: Users can explore 3D maps and send postcards with dynamic content about their location.
The postcard includes a personalized message, the location's coordinates, and an animated GIF representing the place, making the experience visually engaging.
Chatbot Integration: A chatbot functionality is implemented to help users get specific information about the location they are exploring. The chatbot offers real-time, location-specific insights, enhancing the user experience and offering relevant details based on the area.
Auto-Screenshot Attempt: Although the original plan was to capture a screenshot of the explored location automatically, we encountered restrictions due to browser security policies, which prevent automated screenshots for privacy reasons. *While this functionality couldn’t be fully integrated, it was explored twice and documented as part of the project’s scope.

Technologies Used:

HTML: Structured the basic layout and content of the website. CSS: Styled the page for a sleek and modern user experience, ensuring responsiveness and visual appeal. JavaScript: Handled interactivity, map integration, the postcard functionality, and the chatbot. Email JS: (3rd party service - for testing alternative for attaching dynamic-screenshot to email).

APIs & External: Google Console Photorealistic 3D Maps in the Maps JavaScript API Gemini API Places API Figma Gmail

Challenges we ran into:

Auto-Screenshot Functionality: The browser's security policies prevent capturing screenshots programmatically, limiting our ability to implement this feature as intended. Cross-Browser Compatibility: Ensuring the project functions seamlessly across different browsers presented some challenges, particularly map rendering and interactive elements. First time using Figma for front-end design and Google Console.

Accomplishments that we're proud of:

Benefits Smooth User Experience +Easy to share memories, stories, and travel plans +Promotes joy via nostalgia, story-sharing +Reduces feelings of isolation +Supports Lifelong Learning, Geo Learning

Interactive Geo- Learning Gemini 1.5 Flash Chatbot Integration is layered on top of the map to answer questions about the location and enhance the immersive experience eg. “Pistachio Gelato near me?”

Business Value Businesses can use it for community building & Coupon sharing! +Business Place Sharing +Rewards, Coupons +Fosters Sharing stories and communication +Social Connection

What we learned: Sharing memories of a place and plans for future adventures is the start of meaningful interactive connection.

Accessibility: Makes complex 3D mapping technology user-friendly for all. Connection: Provides a unique way to share experiences and build relationships. Engagement: Offers an engaging alternative to traditional communication methods and the opportunity for sharing images and stories. Users will return to explore new places, connect with others, and learn more about the world and places their friends have shared.

What's next for Immersive 3D MAPS: We’ll Turn 3D Maps Postcards & Exploration into AI-powered education with prompts that deepen your understanding of the places you visit and want to share.

+To enhance the efficiency of Google ChatBot and get more accurate information about places, we have to provide specific datasets (for example, learning models) +Add a 3D Maps Postcard Community! +Share your Postcards via Social!. +Prompts to aid follow-up communication +Challenge Quizzes, Scavenger Hunts +Adventure/Travel Prompts +Place Prompts +Audio summarization of travel sites about the area inquired about. +Maybe add to Google Maps….We Wish!

Built With

css
emailjs
gemini
google-console
google-maps
html5
javascript

Submitted to

Google Photorealistic 3D Maps Challenge

Created by

I contributed to the project by integrating Google Maps' 3D visualization with smooth functionality, enabling users to add and store personalized location data. I implemented a location search feature and zoom-in functionality to enhance navigation and usability. Additionally, I incorporated Google Gemini AI, introducing an interactive chatbot to boost user engagement and modernize the application.

Noor Ul Hassan
About: Developer for web/apps, AI/ML, quant algorithms, engineering, business owner, entrepreneur
My role in the Google Photorealistic 3D Maps Challenge was multifaceted. I led the project, 3D MAP POSTCARD, facilitating team collaboration and organizing meetings via Google Meet and communications via Discord and Gmail. I configured our Google Cloud infrastructure, setting up admin, and logins and enabling necessary APIs. (learning how to do this on my own) On the creative side, I collaborated with the team on the project concept and features. I then focused on the positioning, personas, and the front end using Figma (my first time using it!). I produced our pitch deck and video. While my teammates focused tirelessly on the development, I actively engaged with them to understand their GitHub workflow, gaining insights into version control and collaborative coding. Overall it was a great experience with my teammates, Noor and Taha, who are strong developers and lovely people.

Vale Farrar
Leader, Business & GTM strategist. Founder of 1845 AI, expert at translating tech into services with human impact.
I worked on FrontEnd part and to integrate the PostCard functionality and also the portion of integrating Gemini ChatBot.

Muhammad Taha