How do I use EJS with javascript?

Asked

Viewed 2,232 times

-2

I need to pass a content coming from Mongodb’s Collection to my mandatory google maps api function.

How would this code go down the right way with EJS + NODEJS + MONGODB?

I need to pass an array of coordinates of type number and the same to coordinate them and thus creating the Polygon with the collection length for the database.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #info {
    position: absolute;
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
      </style>

</head>
<body>

    <div id="map"></div>
    <div id="info">
    </div>
    <%= for(var i = 0; i < tasks.length; i++) { %>
    <script>
      var map;
var qtPolygon = 0;
var polygonComplete = false;


function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    });

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['marker', 'polygon']
        },
        polygonOptions: {
            editable: true,
            clickable: true,
            fillColor: "#0000FF",
            fillOpacity: 0.5,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        },
        markerOptions: {
            icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
        },
    });
    drawingManager.setMap(map);

    var polygon = new google.maps.Polygon;
    var points = new Array();



      points.push({
        lat: <%= tasks[i].coordenadasLat %>,
        lng: <%= tasks[i].coordenadasLng %>
      });

      polygon[i].setPath(points);
      polygon[i].setMap(map)

  }

    </script>
    <% } %>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRuw2dZRiWf45mKlCbmEz9XMlNrX45P4E&libraries=drawing&callback=initMap" type="text/javascript"></script>



</body>
</html>
javascript node.js mongodb ejs

  • Ola Thiago, it is not clear which part of Voce wants to migrate to EJS

  • @Lucascosta olá comrade, the part of EJS is where your syntax is in the code, which starts at the beginning and at the end odne I use the db Collection.

  • I don’t see where I could change the EJS, because Javascript is irreplaceable in this case. I would have two alternatives Thiago, change for normal for forEach, and/or, check google maps for Node.js, and migrate pro back. Particularly never used this way

1 answer

0

Well, according to your question... For this in EJS, you use syntax scriptlet <% %>.

In your backend Voce would have something like:

var app = express();

/* setar as variáveis 'view engine' e 'views' do express */
app.set('view engine', 'ejs');
app.set('views', './app/views');


//vamos supor que é isso que está renderizando no seu
res.render('index', { validacao: erros }); //arquivo index.ejs

And in your EJS template, the for would be more or less like this: 

            <% if(validacao.length > 0){ %>
                <div class="alert alert-danger">
                    <strong>Os valores do erros:</strong>
                    <ul>
                        <% for(var i = 0; i < validacao.length; i++){ %>
                            <li><%= validacao[i].msg %></li>
                        <% } %>
                    </ul>
                </div>
            <% } %>

I believe that based on your example, it would look something like this:

<%= for(var i = 0; i < tasks.length; i++) { %>
    <%
    var map;
    var qtPolygon = 0;
    var polygonComplete = false;


    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 8
        });

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['marker', 'polygon']
            },
            polygonOptions: {
                editable: true,
                clickable: true,
                fillColor: "#0000FF",
                fillOpacity: 0.5,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            },
            markerOptions: {
                icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
            },
        });
        drawingManager.setMap(map);

        var polygon = new google.maps.Polygon;
        var points = new Array();

          points.push({
            lat: <%= tasks[i].coordenadasLat %>,
            lng: <%= tasks[i].coordenadasLng %>
          });

          polygon[i].setPath(points);
          polygon[i].setMap(map)
      }
    %>
<% } %>
  • See more examples in the EJS.

Browser other questions tagged javascript node.js mongodb ejs

You are not signed in. Login or sign up in order to post.