Inspiration
As an Egyptian, I typically get asked for my recommendations for visiting Egypt, and I typically end up sending a lot of links and texts, but no medium where I can consolidate those easily and visually. Google Maps Platform provided me with an outlet to be able to consolidate all of my recommendations into one space, to some tips, some history, and to even time box how long I would spend at each spot in Cairo and Giza. My overview also shows potential hotels to stay in, as well as the capability to see the distance between the recommended places and hotels listed in order to give tourists a more holistic view of how far things are, and how I structured the plan for the four days.
What it does
I used two Google Maps Platform APIs (Markers + Directions) and used the custom markers capability to add numbers corresponding to the days in Egypt and accommodations (1-4 and a hotel icon). Clicking on the custom markers will also give you an Egyptian's take on the place, some light background, and the suggested time to get there so you can better understand the suggestions for how to start your day.
The second API is the directions API that allows users to see the distance between any two given points to better understand how far apart the recommended places are.
How I built it
I built this using HTML, CSS, and TypeScript, the Google Maps Platform Directions API and the Custom Markers API and looked at Google Maps Platform Documentation for inspiration and help when building this project. I edited my code in CodeSandbox as I really like their interface.
Challenges I ran into
When I was trying to incorporate info text boxes with multiple markers, I had to restructure my entire codebase to be able to do so. I looked at the documentation to understand more of the capabilities and watched some of the videos on YouTube provided by the Google Maps Platform team to be able to better navigate this challenge.
Accomplishments that I am proud of
I am so proud that I have put together this living document that I can share with future tourists of Egypt! I also have not completed a full front end web project before ever in my life, so putting this together meant I was going to apply concepts I have learned about in online courses into real life courses, and made me feel even more confident as a developer!
What I learned
Google Maps Platform has AMAZING documentation for understanding how to implement the APIs throughout the project.
What's next for Four Days in Cairo, Egypt
I want to expand this into an All things Egypt tour! I want to expand upon the other beautiful places in Egypt so that more people can go and see the country and I know and love and I can share it with them!
Built With
- api
- css
- custom
- directions
- html
- maps
- markers
- typescript
Log in or sign up for Devpost to join the conversation.