marius1989d/interactive-frontend-development

Milestone Project using Google Maps API

mTravel

This website is designed to privide the user with the posibility to search for holiday destinations. Here, the users will find their desired city, and will have the posibility to view their wanted points of interest.

CUSTOMER REQUEST

1. The customer wants the users to be able to find holiday destinations and points of interest. The search should be limited to five countries:

• JAPAN
• USA
• BRASIL
• UK
• SOUTH AFRICA

also, the user should be able to search for different countries, and for this the All option has been introduced.

2. The customer wants the user to be able to display points of interests individually:

• HOTELS
• RESTAURANTS
• MUSEUMS

3. The customer wants the users to be able to contact them if they have a request.

4. The customer wants the users to find some recommendations on the page.

UX

This website is friendly, easy-to-use, and is made with responsive approach to provide the users with the best experience.

• as a user, I want to be able to search for destinations, and display them on a map for better visualisation
• as a user, I want to be able to display the results by category
• as a user, I want to be able to contact the company if a have any requirements
• as a user, I want to be able to find informations/ suggestions about a few destinations for better experience

FEATURES

EXISTING FEATURES

• Searching on the map - allow users to search for their desired place.
• Autocomplete - allow user to receive predictions when they search for places, for a better experience.
• Country restriction - allow users to select a destination country before searching for a city. This is made to restrict predictions to the selected country, for a better experiece. Also, the user have the option to search for a place everywhere in the world by selecting All.
• Results by place type - allow user to filter the results by selecting the place type (e.g. hotel, restaurant, museum).
• Info window - allow users to find details about a place by selecting it.
• Contact form - allow users to contact the company for any information needed.
• Info buttons - allow users to find informations about five suggested cities.

FEATURES LEFT TO IMPLEMENT

• Live chat - this will allow the user to contact the company on much efficient way.
• Social websites - this will allow the user to see updates, offers, etc.
• Shop - this will allow the user to buy their holiday direct on the website.
• Flights - this will allow the user to search and book the flight for their holiday.

TECHNOLOGIES USED

HTML5 was used for structure	CSS3 was used to style the page
JavaScript was used for functionality	jQuery was used for DOM tree manipulation
Bootstrap was used for responsivity	Google Maps API was used to create the map
Emailjs was used for the contact service	Jasmine was used for atomated tests

DEVELOPMENT

This project has been developed using the Cloud9 IDE

TESING

This project has been tested both manually and automatic:

• manually:

  • search field - click on the search field - type the desired place - press enter
  • autocomplete - click on the search field - start typing the desired place - it will start giving predictions - choose the desired one and press enter (or just click on it)

  NOTE: by default, the map will get results only for USA.

  • change the country search - click on the country selector - click on the desired contry or select All to search all around the world
  • getting results - once the steps mentioned above has been done, the map will start dropping markers - implicit for hotels
  • switching to restaurants - after the steps above check the restaurant button - it will change the markers on the map according to the requested button
  • switching to museums - after the steps above check the museum button - it will change the markers on the map according to the requested button
  • getting place informations - once the map display the markers, click on any of them - it will display informations ablut that place
  • information buttons - the website provides five buttons which gives some informations about the five selected cities - in order to see those informations simply hover the mouse over the button
  • contact form - click on the contact, on the navbar - it will display the contact form - try to submit an empty form - it won't work untill all fields are filled accordingly

• automated:

  • Jasmine testing framework was used to test the sendMail function

BROWSERS:

BROWSER	VERSION	COMPATIBILITY
GOOGLE CHROME	LATEST	100%
SAFARI	LATEST	100%
MOZILLA FIREFOX	LATEST	100%
SAFARI (mobile)	LATEST	90%
ANDROID	LATEST	90%

DEPLOYMENT

This project can be deployed to any hosting platform. However, the structure and file names must be kept as they are.

google-maps-project
    -css
        -pictures
            travel.jpg
        style.css
    -js
        jQuery.js
        maps.js
        sendemail.js
    -test
        spec.js
        test.html
        test.js
    index.html
    README.md  

CREDITS

CONTENT

The map and pieces of code have been inspired from Google Developers Console
The background image have been downloaded from Google Images
The informations on the info buttons have been written by Dave Owen

ACKNOWLEDGEMENTS

Special thanks to Moosa Hassan for the support and feedback on this project.