Skip to content
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 61 additions & 48 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<!--Browser Title and Icon-->
<title>Delish Food Map</title>
<link rel="icon" type="image/png" href="./Icons/favicon-32x32.png" sizes="32x32"/>
<!--Google Maps and Sign In API Imports-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<meta name="google-signin-client_id" content="609530060923-6a276d3itljrb5986lq2tlrgiudduafc.apps.googleusercontent.com">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Delish Food Map</title>
<link rel="icon" type="image/png" href="./Icons/favicon-32x32.png" sizes="32x32" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!--MarkerClusterer Import-->
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<!--Local JS-->
<script src="./index.js"></script>
<script src="./placeDetails.js"></script>
<script src="./apiRequests.js"></script>
<script src="./cuisineSearch.js"></script>
<script src="./signIn.js"></script>
<script type="text/javascript" src="gmap.js"></script>
<!-- Imported Fonts -->
<!--Imported Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;1,200;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@509&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital@1&display=swap" rel="stylesheet">
Expand All @@ -26,60 +31,68 @@
<!--HEADER DIV-->
<div class="nav-bar-title">
<div class = "title-box" style="white-space:nowrap">
<img src="./Icons/favicon-32x32.png" sizes="50x50"/>
Delish
<img src="./Icons/favicon-32x32.png" sizes="50x50"/>
Delish
</div>
</div>

<!--SIDE NAV BAR DIVS-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div id="menuDescription" class="sidenav-header">
Cuisine Type
</div>
<div class="cuisine-type-check" id="Mexican" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Mexican</a>
<div class="cuisine-type-check" id="Vietnamese" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Vietnamese</a>
<div class="cuisine-type-check" id="Indian" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Indian</a>
<div class="cuisine-type-check" id="Italian" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Italian</a>
<div class="cuisine-type-check" id="Chinese" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Chinese</a>
<div class="cuisine-type-check" id="Thai" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Thai</a>
<div class="cuisine-type-check" id="Greek" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Greek</a>
<div class="cuisine-type-check" id="Middle Eastern" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Middle Eastern</a>
<div class="cuisine-type-check" id="Korean" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Korean</a>
<div class="cuisine-type-check" id="Japanese" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Japanese</a>
<div class="cuisine-type-check" id="African" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">African</a>
<div class="cuisine-type-check" id="Cajun" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Cajun</a>
<div class="cuisine-type-check" id="Latin" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">Latin</a>
<div class="cuisine-type-check" id="American" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a href="#" class="cuisine-type">American</a>
</div>

<!-- ELEMENT TO OPEN SIDENAVBAR DIV -->
<div class="navigation-link-wrap active-nav-link" id = "menu" onclick="openNav()">
<div class="menu-box" id = "menu-box">
Menu
</div>
<div id="mySidenav" class="sidenav">
<a class="closebtn" onclick="closeNav()">&times;</a>
<div id="menuDescription" class="sidenav-header">
Cuisine Type
</div>
<div class="cuisine-type-check" id="Mexican" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Mexican</a>
<div class="cuisine-type-check" id="Vietnamese" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Vietnamese</a>
<div class="cuisine-type-check" id="Indian" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Indian</a>
<div class="cuisine-type-check" id="Italian" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Italian</a>
<div class="cuisine-type-check" id="Chinese" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Chinese</a>
<div class="cuisine-type-check" id="Thai" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Thai</a>
<div class="cuisine-type-check" id="Greek" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Greek</a>
<div class="cuisine-type-check" id="Middle Eastern" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Middle Eastern</a>
<div class="cuisine-type-check" id="Korean" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Korean</a>
<div class="cuisine-type-check" id="Japanese" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Japanese</a>
<div class="cuisine-type-check" id="African" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">African</a>
<div class="cuisine-type-check" id="Cajun" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Cajun</a>
<div class="cuisine-type-check" id="Latin" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">Latin</a>
<div class="cuisine-type-check" id="American" style="float: right; margin-top: 10px; margin-right: 15px;"></div>
<a class="cuisine-type">American</a>
</div>

<!-- ELEMENT TO OPEN SIDENAVBAR DIV -->
<div class="navigation-link-wrap active-nav-link" id="menu" onclick="openNav()">
<div class="menu-box" id="menu-box">
Menu
</div>
</div>

<!--GOOGLE SIGN IN BUTTON-->
<body>
<div id="my-signin2" class="navigation-link-wrap-signin"></div>
<div class="signout-box active-nav-link" onclick="signOut()" id="signout" display='none'>
Sign Out
</div>
<script src="https://apis.google.com/js/platform.js?onload=initSigninV2" async defer></script>
</body>

<!--GMAPS DIVS-->
<div id="box"></div>
<div id="map"></div>


<!-- pop-up divs -->
<!--POP UP DIVS-->
<div class="description" id="popup">
<div class="description-header">
<div class="title">Welcome to Delish Food!</div>
Expand Down
51 changes: 33 additions & 18 deletions public/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ var mapCenterPos = {lat: 0, lng:0};
var centerMarkerContainer = [];
var centerMarkerSize = {height: 28, width: 30};

// Does not allow user to view out of bounds (grey regions) above map
const WORLD_BOUNDS = {
north: 85,
south: -85,
west: -180, // Change to -179 for west bounds
east: 180, // Change to 179 for east bounds
}

function initMap() {

//center of earth coords
Expand All @@ -14,15 +22,21 @@ function initMap() {
// show popup when click on marker
infowindow = new google.maps.InfoWindow();

//create the map
// create the map
map = new google.maps.Map(document.getElementById("map"), {
center: startCenter,
restriction: {
latLngBounds: WORLD_BOUNDS,
strictBounds: true,
},
zoom: 3,
mapTypeControl: true,
maxZoom: 18,
minZoom: 3,
fullscreenControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});

Expand All @@ -39,7 +53,7 @@ function initMap() {
// Initialize centerMarkerContainer
initCenterMarker();

//Style the map
// Style the map
var styledMap = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('myCustomMap', styledMap);
map.setMapTypeId('myCustomMap');
Expand All @@ -50,7 +64,7 @@ function initMap() {
placeMarkerAndPanTo(mapCenterPos, map);
});

//create the button to close discription
// create the button to close discription
const closeDescriptionButton = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

Expand All @@ -61,7 +75,7 @@ function initMap() {
})
})

//button to close description
// button to close description
function closeDescription(description) {
if (description == null) return
description.classList.add('active')
Expand All @@ -73,16 +87,16 @@ function initMap() {
//Geolocation to track user location
function geoLocation() {

infoWindow = new google.maps.InfoWindow();
infowindow = new google.maps.InfoWindow();
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {

//Initialize Marker Clusterer
// Initialize Marker Clusterer
clusters();

const pos = { //get User coordinaties
const pos = { // get User coordinaties
lat: position.coords.latitude,
lng: position.coords.longitude,
};
Expand All @@ -98,30 +112,31 @@ function initMap() {
setMenuTransition(0);
openNav()

//Call cuisineTypeListener to init menu search options
// Call cuisineTypeListener to init menu search options
cuisineTypeListener();
},
() => { // Enable Location not allowed
handleLocationError(true, infoWindow, map.getCenter());
handleLocationError(true, infowindow, map.getCenter());
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
handleLocationError(false, infowindow, map.getCenter());
}
}

//Error function on geolocation failure
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(
// Error function on geolocation failure
function handleLocationError(browserHasGeolocation, infowindow, pos) {
infowindow.setPosition(pos);
infowindow.setContent(
browserHasGeolocation
? "Error: The Geolocation service failed. Please enable your location."
: "Error: Your browser doesn't support geolocation."
);

infoWindow.open(map);
infowindow.open(map);
}
google.maps.event.trigger(map, 'resize');
}

// Initialize center marker container with null marker
Expand Down Expand Up @@ -182,4 +197,4 @@ function closeNav() { //On close, close the side navigator
// Set Menu button transition time
function setMenuTransition(transitionTime) {
document.getElementById("menu").style.transition = `opacity ${transitionTime}s ease-out`;
}
}
57 changes: 57 additions & 0 deletions public/signIn.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
var auth2;

// Ensure auth2 object is initialized (important for signout), then load button
function initSigninV2() {
gapi.load('auth2', function() {
gapi.auth2.init({
client_id: '609530060923-6a276d3itljrb5986lq2tlrgiudduafc.apps.googleusercontent.com'
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does this clientid come from?

}).then(function (authInstance) {
console.log("Making auth instance");
auth2 = authInstance;
renderButton();
});
});
}

// Render the google sign in button as well as information scope
function renderButton() {
// Set scope and success/failure functions
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 42,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}

// On successful user sign in, retrieve and store pertinent information
function onSuccess(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('User ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Logged in as: ' + profile.getName());
console.log('User Image URL: ' + profile.getImageUrl());
console.log('User email: ' + profile.getEmail()); // Will be null if email scope not set
document.getElementById("my-signin2").style.display = 'none';
document.getElementById("signout").style.display = 'block';
}

// If sign in fails
function onFailure(error) {
console.log(error);
}

// Attempt to sign user out
function signOut() {
console.log("Signing user out")
if (auth2 != null) {
auth2.signOut().then(function () {
auth2.disconnect();
//Make sign in button reappear, hide sign out button
document.getElementById("signout").style.display = 'none';
document.getElementById("my-signin2").style.display = 'block';
});
}
}
Loading