Google Maps API using Node.js and Express

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');
});

Answer

You were already on the right track. You can output EJS variables inside of an inline JS script in a similar way as you were doing with the HTML.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap"></script>

<script>
  function initMap() {
    var randomCaseLocation = {
      lat: <%= randomCase.latitude %>,
      lng: <%= randomCase.longitude %>
    };

    // The map, centered at encounter
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: randomCaseLocation
      });
    // The marker, positioned at encounter
    var marker = new google.maps.Marker({
      position: randomCaseLocation,
      map: map
    });
  }
</script>

But, the most elegant solution would be to create an endpoint that only returns the randomCase object which you request from the client through the Fetch API.

Sidenote: nesting heading elements (h1 – h6) inside of paragraph elements makes invalid HTML. Look at the list of allowed children of the paragraph element.

Advertisement

Answer