CODEWITHSUNDEEP
node.jsgoogle-mapspugtemplate-engine
BKSingh
BKSingh

Reputation: 527

While rendering html+js page in node.js using jade, getting html as text rendered instead of the html

I am trying to render an html+js page in nodejs using jade. I used the online available html to jade converters to convert my html to jade and then render it from my nodejs app. However, I am not able to render the jade properly. The example that I used is the one provided by google in their documentation for google maps API

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with google</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);

var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];

var markers = [];
var iterator = 0;

var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};

map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
  addMarker();
}, i * 200);
}
}

function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="panel" style="margin-left: -52px">
  <button id="drop" onclick="drop()">Drop Markers</button>
 </div>
<div id="map-canvas"></div>
</body>
</html>

I tried many converters to convert but each of them gave me one or the other error. The http://html2jade.vida.io/ was able to convert it into jade.

I saved the file as maps_marker.jade in my views directory and from one of my APIs in web.js I made a call "res.render('maps_marker',{})" to render this page. However the page rendered the following html as text

 <!DOCTYPE html><html><head><meta charset="utf-8"><title>Marker animations with google</title><style><html>, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</html><div id="panel">{position: absolute;top: 5px;left: 50%;margin-left: -180px;z-index: 5;background-color: #fff;padding: 5px;border: 1px solid #999;}</div></style><script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script><var>berlin = new google.maps.LatLng(52.520816, 13.410186);</var><var>neighborhoods = [</var><new>google.maps.LatLng(52.511467, 13.447179),</new><new>google.maps.LatLng(52.549061, 13.422975),</new><new>google.maps.LatLng(52.497622, 13.396110),</new><new>google.maps.LatLng(52.517683, 13.394393)</new>];<var>markers = [];</var><var>iterator = 0;</var><var>map;</var><function>initialize() {</function><var>mapOptions = {zoom: 12,center: berlin};</var><map>= new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</map><function>drop() {for (var i = 0; i < neighborhoods.length; i++) {setTimeout(function() {addMarker();}, i * 200);}}</function><function>addMarker() {markers.push(new google.maps.Marker({position: neighborhoods[iterator],map: map,draggable: false,animation: google.maps.Animation.DROP}));iterator++;}</function><google window load initialize class="maps event addDomListener"></google></script></head><body><div id="panel" style="margin-left: -52px"><button id="drop" onclick="drop()">Drop Markers</button></div><div id="map-canvas"></div></body></html>

Can someone help me understand how to render such html+js in node.js. I am currently try to use the jade template engine, but am open to using any other template engine as well.

UPdated to add snippet from my web.js and input from

I have an index.html(in public folder) with the following form within it

<form id="searchForm" action="/submit_search" method="POST" enctype="multipart/form-data">
    <input name="latitude" type="text" id="latitude"/>
    <input name="longitude" type="text" id="longitude"/>
    <input type="submit" value="Submit" onclick="submitForm()">
</form>

In my javascript - I submit the form. IN my web.js I have the following snippet for submit_search API

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.post('/submit_search', function(req,res){
    console.log(JSON.stringify(req.body));
    pg.connect(database_url, function(err, pgclient, done){
            if(err)
            {
                    console.log("Error in fetching pgclient from pool");
                    res.send(500, "Load the error connection page");
            }
            else if(pgclient != null)
            {
                    console.log("Got an instance of pgclient");
                    generateDataForMap(req, res, pgclient, done);
            }
    });
});

And then I have defined my generateDataForMap method

var generateDataForMap = function(req, res, pgclient, done){
  ... some processing.....
  ..... create the required json.....
    res.render('maps_marker',json);
}

I have put the maps_marker.jade file in the views folder..

Upvotes: 1

Views: 2774

Answers (1)

Delapouite
Delapouite

Reputation: 10187

The jade file produced by http://html2jade.vida.io/ is not valid. To fix it, you need to add a . (dot char) after the style and script tags to turn them in to style. and script. respectively.

doctype html
html
  head
    meta(charset="utf-8")
    title Marker animations with google
    style.
      html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
      }
      #panel {
      position: absolute;
      top: 5px;
      left: 50%;
      margin-left: -180px;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      }
    script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
    script.
      var berlin = new google.maps.LatLng(52.520816, 13.410186);
      var neighborhoods = [
      new google.maps.LatLng(52.511467, 13.447179),
      new google.maps.LatLng(52.549061, 13.422975),
      new google.maps.LatLng(52.497622, 13.396110),
      new google.maps.LatLng(52.517683, 13.394393)
      ];
      var markers = [];
      var iterator = 0;
      var map;
      function initialize() {
      var mapOptions = {
      zoom: 12,
      center: berlin
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      }
      function drop() {
      for (var i = 0; i < neighborhoods.length; i++) {
      setTimeout(function() {
      addMarker();
      }, i * 200);
      }
      }
      function addMarker() {
      markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
      }));
      iterator++;
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  body
    #panel(style="margin-left: -52px")
      button#drop(onclick="drop()") Drop Markers
    #map-canvas

Upvotes: 1

Related Questions