Hello and Welcome to my question!
I want to make a fairly simple website
I have some data in my database and I want to use them on a google maps API
Basically, I want for each place that I have stored, in my db, to have a marker at it’s coordinates
My mongoose schema is this:
const mongoose = require('mongoose')
const placeSchema = new mongoose.Schema({
_id: String ,
name: String,
address: String,
types:[ String ],
coordinates:{ lat: Number, lng: Number },
rating: Number,
rating_n:Number,
current_popularity: Number ,
populartimes:[
{
name: String ,
data: [ Number ]
}
],
times_spent: [ Number ]
})
module.exports = mongoose.model('place', placeSchema)
I have read the google API docs and I am trying to do it as they say but I cannot get my data in my js file that my function initMap() is in.
The path is like this:
/login/user
And the user.ejs file is:
<script type="text/javascript" src="js/user.js"></script>
<div class="container">
<div class="form-uheader">
<h1>Welcome <%if (typeof user != 'undefined'){%>
<%= user.username %>
!
<% } %> </h1>
<h2>Let's evaluate your choices.</h2>
</div>
</div>
<div class="container">
<div class="dropdown">
<button onclick="openDropdown('map')" class="drop_btn"><img src="images/map.png" alt="#"><h1>What is next to you?</h1></button>
<button onclick="openDropdown('search')" class="drop_btn"><img src="images/search.png" alt="#"><h1>Points of Interest</h1></button>
<button onclick="openDropdown('verify')" class="drop_btn"><img src="images/verify.png" alt="#"><h1>Register a Visit</h1></button>
<button onclick="openDropdown('nervous')" class="drop_btn"><img src="images/nervous.png" alt="#"><h1>Possible contact with a covid case</h1></button>
<button onclick="openDropdown('patient')" class="drop_btn"><img src="images/patient.png" alt="#"><h1>Do you have Covid?</h1></button>
<button onclick="openDropdown('edit')" class="drop_btn"><img src="images/edit.png" alt="#"><h1>Edit your profile</h1></button>
</div>
<div id = "data">
<% if(typeof place != 'undefined'){ %>
<%var places = place %>
<% } %>
</div>
</div>
<div class="container">
<div id="menu" class="dropdown-menu">
<div class="dropdown-item" id = "item-map">
<div id="map"></div>
<% //script for maps API %>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPmkodwFVGpcTcpFyUbeDxaAwYYlUJjnM&callback=initMap&v=weekly"
async
></script>
<script src="js/map.js"></script>
<% //END script for maps API %>
<span class="closebtn" onclick="this.parentElement.parentElement.style.display='none';">×</span>
</div>
<div class="dropdown-item" id = "item-search">
<div id = 'search'>
search
</div>
<span class="closebtn" onclick="this.parentElement.parentElement.style.display='none';">×</span>
</div>
<div class="dropdown-item" id = "item-verify">
<div id = 'verify'>
verify
</div>
<span class="closebtn" onclick="this.parentElement.parentElement.style.display='none';">×</span>
</div>
<div class="dropdown-item" id = "item-nervous">
<div id = 'nervous'>
nervous
</div>
<span class="closebtn" onclick="this.parentElement.parentElement.style.display='none';">×</span>
</div>
<div class="dropdown-item" id = "item-patient">
<div id = 'patient'>
patient
</div>
<span class="closebtn" onclick="this.parentElement.parentElement.style.display='none';">×</span>
</div>
<div class="dropdown-item" id = "item-edit">
<div id = 'edit'>
edit
</div>
<span class="closebtn" onclick="this.parentElement.parentElement.style.display='none';">×</span>
</div>
</div>
</div>
Basically, there are 6 buttons and when 1 of them is pressed a different dropdown menu appears.
I have tried to pass my data to user.ejs, but I could not use my variable between tags
I cannot connect to mongo schema in static js file (As it was expexted)
Lastly I will present you my login route:
const express = require('express')
const router = express.Router()
const User = require('../models/user')
const Place = require('../models/place')
// Main Route
router.get('/', (req, res )=> {
const fromReg = req.query.valid
console.log(fromReg)
res.render('login',{
'page':'login',
fromReg
})
})
router.get('/user', (req, res) => {
res.render('login/user',{
'page' : 'user'
})
})
router.get('/admin', (req, res) => {
res.render('login/admin',{
'page' : 'admin'
})
})
//Create About Route
router.post('/', async (req, res) => {
User.findOne({ email : req.body.email }).then( async (user) => {
if(user){
if (user.password === req.body.password) {
if (user.admin){
//login admin
res.render('login/admin',{
'page' : 'admin',
user
})
}else{
const place = await Place.find({})
res.render('login/user',{
'page' : 'user',
user,
place
})
}
}else{
const alert = [];
alert.push({ msg: 'Email or Password is not correct'})
res.render('login', {
'page' : 'login',
fromReg : false,
alert
})
}
}else{
const alert = [];
alert.push({ msg: 'Email or Password is not correct'})
res.render('login', {
'page' : 'login',
fromReg : false,
alert
})
}
})
})
module.exports = router
And I have to tell you that I have 1 javascript file called user.js, that does the animations on the page
and 1 more that is called map.js that basically is copied and pasted from google API documentation
Just to sum up, I would like to know how (but firstly, if) I can use my data in a client-side js file (at least I think this is client-side), or else how can I achieve the end result that I want
Plus this is how my user page looks like:
