i have an idea for a website that takes in ufo information from a certain API. i have been able to display information such as the location of the encounter. the API also returns coordinates of the encounters and i want to display a map with a marker of said location. the only way I'm able to obtain the specific data i want is by using the "<%=%>". the information is random each time so i hope there is a method similar that that above that will help me access the coordinates of each random case
tracker.ejs
<form method="GET" action="/tracker">
<section class = "theHeader">
<h1> Type in a location </h1>
<h6>to track something</h6>
<input type="text" name="location" placeholder="type in a location">
<input type="submit">
</form>
</section>
<section class="theInfo">
<div id="googleMap"></div>
<div class="infocontainer">
<p>
<h2>Place of the Encounter</h2>
<%=randomCase.locationName%>
</p>
<p>
<h2>Type of Sighting</h2>
<%=randomCase.type%>
</p>
<p>
<h2>Summary of the Encounter</h2>
<%=randomCase.detailedDescription%>
</p>
</div>
</section>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap"> </script>
<script>
function initMap() {
// The location of encounter
var location = {
lat: -25.344,
lng: 131.036
};
// The map, centered at encounter
var map = new google.maps.Map(
document.getElementById('map'), {
zoom: 4,
center: location
});
// The marker, positioned at encounter
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
</body>
</html>
index.js
const express = require('express');
const app = express();
const fetch = require("node-fetch");
app.set("view engine", "ejs");
app.use(express.static("public"));
app.get('/tracker', async (req, res) => {
var randomNumber = Math.floor(Math.random() * 10);
let location = req.query.location;
let url = `https://ufo-sightings.p.rapidapi.com/search/${location}`;
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'key',
'X-RapidAPI-Host': 'ufo-sightings.p.rapidapi.com'
}
};
let response = await fetch(url, options);
let data = await response.json();
let randomCase = data.content[randomNumber];
let lat = randomCase.latitude;
let lng = randomCase.longitude;
res.render('tracker', {"randomCase": randomCase});
});
app.listen(3000, () => {
console.log('server started');
});
Via Active questions tagged javascript - Stack Overflow https://ift.tt/j6HbPFo
Comments
Post a Comment