Skip to content
A restaurant review site where you can search for restaurant around you (or anywhere in the world), see and add reviews or even add new "spots" by right-clicking on the map. Follow project link
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js
README.md
index.html

README.md

Restaurant Review Website

OpenClassrooms: Front-end Web Developer, Project 7

Project deliverables

  • A Google Maps map loaded with the Google Maps API
  • The Google Maps map will focus immediately on the position of the user
  • A list of restaurants is provided as JSON data in a separate file
  • A list of restaurants on the right side of the page that are within the area displayed on the map
  • When you click on a restaurant, the list of reviews should be shown
  • Also show the Google Street View photo via the corresponding API
  • A filter tool allows the display of restaurants that have between X and Y stars
  • Add a restaurant by [right-clicking] on a specific place on the map
  • Add a review about an existing restaurant
  • [Interate Google Paces] to display additional restaurants and reviews on your map

Author

By Alexandre Formoso - August 2019

See full application

👉 https://alexandreformoso.github.io/OC-Project7-restaurant-review-site/

game printscreen

Example Code

/*===========================================================================================================
*  INITIALISING GOOGLE MAPS
===========================================================================================================*/

/**  Geolocation API
*****************************************************/
function initMap() { 
  document.querySelector('#bottomSection').style.display = 'none';
  // if user's browser does not support Navigator.geolocation object
  if (!navigator.geolocation) { 
    console.log("Geolocation is not supported by your browser");
    alert('Geolocation is not supported by your browser');
  } else {
    document.getElementById('rattings-wrapper').style.display = 'none';
    document.getElementById('map').innerHTML = welcome_msg;
    // getCurrentPosition gets device's live location
    navigator.geolocation.getCurrentPosition(getUserLocation, handleErrors, geoOptions);
  }
} 

/** if user's browser supports Geolocation
*****************************************************/
let getUserLocation = function (position) {
  document.querySelector('#bottomSection').style.display = 'none';
  // user location coordinates - read-only properties (black box)
  let lat = position.coords.latitude; 
  let lng = position.coords.longitude;
  console.log("Google Maps API, version " + google.maps.version);
  pos = { lat: lat, lng: lng };
  createMap(pos);
}
You can’t perform that action at this time.