How to use EJS with javascript?

Question

How to use EJS with javascript?

Navigation

#1 by (0 votes)

-2

I need to move content that comes from the MongoDB collection to my mandatory Google Maps api role.

How would this code be below the right mode with EJS + NODEJS + MONGODB?

I need to pass a Array of Lath coordinates of type number and the same to coordinatesLng and thus creating the polygon with the length of collection of 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

asked by anonymous 16.11.2017 / 16:21

1 answer

How to sort random number but appear 8 numbers 1 number each time? Problem picking up a GSON variable

score 0 · Answer 1

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

On your backend you 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, for would look something 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 think 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 official EJS documentation.