#Place Search Website

This project focuses on helping visitors find their next holiday place by providing a worldwide range of locations and relevant information about each place selected

I have written this project in HTML, CSS, Javascript and I have used Bootstrap mainly for scalability (yet I have used some of their features to style my page).

TECH USED

HTML - HTML has been used to create markup CSS - CSS has been used to style my content Javascript - I have used javascript to write pretty much all functionality of this project BOOTSTRAP - Bootstrap has been used for responsiveness and help style some elements Google Places API - Used to access the map and retrieve relevant information for this project GIT / GITHUB /GITHUB-pages - used for version control, code backup and deployment

#Validators - HTML The Code Passes Trough (https://validator.w3.org/#validate_by_input) w3schools validator with no errors - CSS The code passes trough (https://jigsaw.w3.org/css-validator/validator) w3schools validator With No Errors - JAVASCRIPT The Code passes trough (http://esprima.org/demo/validate.html) with no mistakes and/or errors

UX

This Website is for anyone looking to gather information about places

• as a visitor, I would like a world map
• as a visitor, I would like to choose which location I want to see
• as a visitor, I would like to select places relevant to my next holiday (accommodation, travel, touristic attractions, food, drink,)
• as a visitor, i would like information about those places (address, website, rating, open times, telephone number )
• as a visitor, I would like to have a street view option
• as a visitor, I would like to be able to control the map (zoom, drag, select)

Wireframes

- wireframes have been added for both desktop and mobile displays :)

Features

- This is a simple one-page application with the following features

- World map 
- location(city,town,village) search functionality with autocomplete 
- ability to browse trough options and select the type of place user are looking for 
- custom markers for each place type
- on user selection(click marker or item from list) display relevant information about a specific place 
- map controlls (zoom,drag,select)
- 360* street view (where such option is available(some remote locations do not have this feature yet implemented))
- ability to open a certain place in google maps (click on place name in the infowindow)
- different map themes (Map , Satellite)
- full screen map option 

Features Left To Implement

- None

TESTING

• Extensive testing has been carried out at the time of implementation for each new piece of functionality
• testing has been carried out on all major browsers and some mobile devices
• usability test has been carried out by friends and family
• the website renders accordingly on all screen sizes down to 360px

Individual Feature Testing

- the place search functionality works as intended returning accurate place name predictions 
- place type functionality works as intended returning accurate results
- custom markers provide clear visual differentiation between place types
- info window provides the user with accurate relevant information about a specific place (when such information is available)
- map controls work as intended both on desktop and mobile (full-screen map is required on mobile devices to receive a more accurate user experience)
- 360* View works as intended (mobile devices will provide a better experience as the map will use the device's auto-rotate feature)
- different map themes work as intended providing end-user different view options

UI

The design of this website has been made to provide users with a fun interactive and non-intrusive way to explore places around the world Chosen Color-theme provides the user the ability to focus on the 3 main pieces of functionality (Map, Search Options and result list)

Deployment

-This project's code has been handled by git and then hosted by GitHub followed by deployment on GitHub-pages

-The repository can be found on GitHub at (https://github.com/toderas/places-api)

-This project has been deployed through GitHub-pages and can be found at (https://toderas.github.io/places-api/)

Acknowledgements

# IMPORTANT # Base code for this project has been imported from Google official documentation which can be found at ("https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch") 

and modified to suit this project's requirements - StackOverflow - for code related issues - w3schools for inspiration and code-related issues - friends and family for usability tests - google API documentation for helping me to understand how it works - Antonija Simic (Mentor) for her continuous support and patience throughout this project!