How to pass msg.payload to template node

I added a google maps widget to the Dashboard and I am trying to add a as the latitude and msg.payload.lon as longitude, but I don't know the right syntax. Could anyone help me please?
Thank you!

This is the piece of code:

<script type="text/javascript">
  var MAP_ZOOM = 12
  var MARKER_SIZE = 14
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: **{{}}**, lng: **{{payload.lon}}** }

so long as msg.payload is an object containing .lat and .lon then pretty much as you have (without the stars)

center: {lat: {{}}, lng: {{payload.lon}} }

or perhaps

center: {lat: {{}}, lng: {{msg.payload.lon}} }

Just use a DEBUG node before the template node - ensure msg.payload is an object with those properties

It does not work neither nor :frowning:

how do you know? Have you put a debug on the output of the template node and checked?

One thing I have noticed is - that message containing coordinate is coming in every 1 second - it is not really the best solution to rebuild the whole page every 1 second!

What are you trying to achieve - live tracking on a google map?

What I get in the debug node from the template node is the msg.payload, so all the html code, but I know it because if I set static longitude and latitude as a number in the HTML code, I can see the map on the Dashboard, otherwise I can't

Yes, that's how it is

show me the debug message going in and out out of the template

It definitely works...

[{"id":"c012061.82b83f8","type":"inject","z":"4b3f21a3.ba434","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"lat\": 41.1, \"lon\": 0.123}","payloadType":"json","x":1520,"y":1540,"wires":[["d34bb602.cc8d68","d708cead.56e7e"]]},{"id":"d34bb602.cc8d68","type":"template","z":"4b3f21a3.ba434","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script type=\"text/javascript\">\n$(document).ready(function(){\n  var MAP_ZOOM = 12\n  var MARKER_SIZE = 14\n  var mapOpts = {\n      zoom: MAP_ZOOM,\n      center: {lat: {{}}, lng: {{payload.lon}} }\n    }\n</script>    ","output":"str","x":1680,"y":1540,"wires":[["cb159340.02a4e"]]},{"id":"d708cead.56e7e","type":"debug","z":"4b3f21a3.ba434","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1630,"y":1600,"wires":[]},{"id":"cb159340.02a4e","type":"debug","z":"4b3f21a3.ba434","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1850,"y":1540,"wires":[]}]
[{"id":"5b67a4a.a77885c","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"1e5c058e.47f47a","type":"ui_template","z":"5b67a4a.a77885c","group":"88f77589.0122d8","name":"Map widget","order":0,"width":"24","height":"14","format":"<iframe \n    id='frame'\n    src='/mapui'\n    width='100%'  \n    height='100%'\n>\n</iframe>\n\n<script>\nscope.$watch('msg.payload', function(newv, oldv, scope) {\n    $(\"#frame\")[0].contentWindow.postMessage(JSON.stringify(newv), '*');\n});\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":610,"y":100,"wires":[[]]},{"id":"73a1e6ed.68da48","type":"http response","z":"5b67a4a.a77885c","name":"","statusCode":"","headers":{},"x":590,"y":160,"wires":[]},{"id":"9b839fed.61113","type":"http in","z":"5b67a4a.a77885c","name":"","url":"/mapui","method":"get","upload":false,"swaggerDoc":"","x":226,"y":160,"wires":[["4d80474b.f714a8"]]},{"id":"4d80474b.f714a8","type":"template","z":"5b67a4a.a77885c","name":"Map UI","field":"payload","fieldType":"msg","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n  <title>LOCATION</title>\n  <script src=\"\"></script>\n  <script src=\"\"></script>\n  <script src=\"\"></script>\n\n  <style type=\"text/css\" media=\"screen\">\n    #map {\n      position:absolute;\n      top: 0; bottom: 0; left: 0; right: 0;\n    }\n  </style>\n</head>\n<body>\n  <div id=\"map\"></div>\n  <script type=\"text/javascript\">\n$(document).ready(function(){\n  var MAP_ZOOM = 12\n  var MARKER_SIZE = 14\n  var map = new google.maps.Map(document.getElementById('map'), {\n      zoom: MAP_ZOOM,\n      center: {lat: {{}}, lng: {{payload.lon}} }\n    });\n    \n  var markers = []\n  \n  window.onmessage = function(evt){\n    for (var i = 0; i < markers.length; i++) {\n      markers[i].setMap(null);\n    }\n    \n    var data = JSON.parse(;\n    map.setZoom(MAP_ZOOM);\n    \n    markers =, i) {\n      var marker = new google.maps.Marker({\n        position: el,\n        icon: {\n          url: el.iconUrl,\n          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)\n        },\n        map:map\n      });\n      google.maps.event.addListener(marker , 'click', function(){\n        var infowindow = new google.maps.InfoWindow({\n          content:el.description,\n          position: el,\n        });\n;\n        setTimeout(function () { infowindow.close(); }, 2000);\n      });\n      return marker\n    });\n  }\n});\n  </script>\n</body>\n</html>","x":416,"y":169,"wires":[["73a1e6ed.68da48","ec4c3c6.f8ecac"]]},{"id":"752c4bd3.0cfcd4","type":"inject","z":"5b67a4a.a77885c","name":"","repeat":"","crontab":"","once":false,"topic":"","payload":"[{\"lat\":49.268311, \"lng\":-123.148146, \"description\":\"awefa\", \"iconUrl\":\"\"},{\"lat\":49.265311, \"lng\":-123.148146, \"description\":\"awefa\", \"iconUrl\":\"\"}]","payloadType":"json","x":230,"y":100,"wires":[["1e5c058e.47f47a"]]},{"id":"800a50fe.d2c37","type":"link in","z":"5b67a4a.a77885c","name":"","links":["20da2fe6.77964"],"x":175,"y":220,"wires":[["a60f4e53.8d18e","4d80474b.f714a8"]]},{"id":"a60f4e53.8d18e","type":"debug","z":"5b67a4a.a77885c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":430,"y":220,"wires":[]},{"id":"ec4c3c6.f8ecac","type":"debug","z":"5b67a4a.a77885c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":630,"y":220,"wires":[]},{"id":"88f77589.0122d8","type":"ui_group","name":"","tab":"c4c17961.4519f8","order":1,"disp":true,"width":"24","collapse":false},{"id":"c4c17961.4519f8","type":"ui_tab","name":"Location","icon":"dashboard","disabled":false,"hidden":false}]

If you import my flow, you will notice that my {{ or lon}} is not orange as it is yours, I do not know it that affects to that but the fact is that I cannot see the data in the Dashboard then...

Here is the outputs for the debug nodes:

As I said, it works - this is from your screen shot.

It only looks different because I clicked the expander...

TBH, you would be far better off using the ui-template node.

With the ui-template node you can send updates from your device WITHOUT rebuilding the whole page.

e.g. send a message with lat and lon that then updates the marker on the map

I harcoded the values when I sent you the screenshot, sorry!

Ok, I tried but it did not work at the moment... I tried to adda 10 seconds delay as you said to get the data a little bit delayed, but I get it every second anyways. I have to leave now, but I'll continue on Monday!

Thank you so much for your help! I'll try again on Monday :slight_smile:

a 10 second delay will only cause EVERY message to come 10s late (every message will still be sent & they will be 1s apart)

You need to set it to rate limit 1msg per 10 secs

Maybe it is, because you start reproviding the page already before it has been build up from the previous request?


The node-red-contrib-web-worldmap has a dashboard widget built in and can handle that rate no problem

Hi Steve! I still have the same problem, I get the information, but the map does not show any location...

I am trying to install it, and if I go to the .node-red directory and I run "npm i node-red-contrib-web-worldmap", I get a EAI_AGAIN errno and code, and request to https:/ failed, reason: getaddrinfo EAI_AGAIN

And I do not find a solution for this...

This is not a node-red issue - try searching for google maps api help/

There are thousands of results for that - essentially either the PC/SERVER/PI running node-red does not have access to the internet or has a DNS issue - read the issues linked to for a solution.

Questions: From the PC/SERVER/PI running node-red, can you...

  • Can you ping ?
  • Can you curl

Definitely it was a bad Wi-Fi connection which was not letting me download the nodes, and once I downloaded it, it worked!

So thank you everyone for your help!!!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.