Milestone-2

I wanted to create a searchable map so when someone wants to plan a trip to a destination anywhere in the world, they can use my website to do so.

User story: As a consumer looking to plan a vacation while using GlobeTrotter's website, I want to be able to search for a location and the results of the map that comes back should provide me with tourist attraction sites and more (restaurants, bars, museums, etc.).

User story: as a consumer looking to search for "tourist attractions" at a particular location. I can simply search "Tourist attractions in Seattle, WA USA" (for example) if I want tourist attractions in Seattle, Washington USA.

User story: as a consumer looking to search for "bars" or "restaurants" at a particular location. I can simply search for either key word followed by the location I'm wanting to search for and results will come up with that particular location.

Code to render the google map API with the search function was taken from this jsfiddle and google maps api documentation:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

(Clicking on this link may not take you to the correct site where the code was taken, but if you use the above link and go to 'try it yourself' on the page then click the link to the jsfiddle, it will take you there). https://jsfiddle.net/api/post/library/pure/

UX:

I wanted a very simple design from the introduction page with the animated text to the presentation screen where the map is. I didn't want to overload the viewer with more detail than needed. I provided a very simple set of instructions to search where you want to visit and a search box and the ability to zoom in and out of the map if needed.

Features:

I wanted to provide a modal button but it broke the code when I used it and made the search box inoperable also, so I had to delete it.

Features left to implement:

I want to be able to place markers on locations I want to provide listings for users I want to provide information windows for locations searched with the amenities and features listed.

Technologies used:

Javascript Bootstrap CSS HTML 5 GSAP (GreenSock Animation Platform - used for text animation)

Deployment:

I used Github Pages to host my site. It can be found here: https://mick3.github.io/Milestone-2/

Bugs/Fixes:

I was unable to figure out how to include a modal button with a set of instructions for the user, so I just used paragraph text above the map. This would make the UX/UI look better in the future if I could figure out a fix for this.

Credits:

I credit Google Maps API team of developers for launching a jsfiddle with the code to place a map and searchbox on the page.

This project is for educational purposes only.