# How to pass msg.payload to template node

**URL:** <https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639>\
**Category:** General\
**Created:** [14 May 2021 11:32 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639 "2021-05-14T11:32:52Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [14 May 2021 11:32 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/1 "2021-05-14T11:32:52Z")

</div>

Hi!  
I added a google maps widget to the Dashboard and I am trying to add a msg.payload.lat 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:

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

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 May 2021 11:37 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/2 "2021-05-14T11:37:23Z")

</div>

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

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

or perhaps

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

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

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [14 May 2021 11:45 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/3 "2021-05-14T11:45:06Z")

</div>

![Captura de pantalla de 2021-05-14 13-39-57](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/55752b7b0e838dc68e9acebe04d4d242416d6d21.png)

It does not work neither msg.payload.lat nor payload.lat ☹

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 May 2021 11:55 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/4 "2021-05-14T11:55:58Z")

</div>

> [@quemf](#):
>
> It does not work

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?

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [14 May 2021 12:07 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/5 "2021-05-14T12:07:22Z")

</div>

> [@Steve-Mcl](#):
>
> how do you know? Have you put a debug on the output of the template node and checked?

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

> [@Steve-Mcl](#):
>
> What are you trying to achieve - live tracking on a google map?

Yes, that's how it is

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 May 2021 12:13 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/6 "2021-05-14T12:13:22Z")

</div>

> [@quemf](#):
>
> What I get in the debug node from the template node is the msg.payload, so all the html code

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

It definitely works...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b70af569228a93557725cef918ad25863fbc6e3.png)

```auto
[{"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: {{payload.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":[]}]

```

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [14 May 2021 12:23 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/7 "2021-05-14T12:23:32Z")

</div>

```auto
[{"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=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js\"></script>\n <script src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyBOZUVdA4rQBMUfb0o2Ckgsh1zB_tPUhWw\"></script>\n <script src=\"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js\"></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: {{payload.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(evt.data);\n map.setZoom(MAP_ZOOM);\n \n markers = data.map(function(el, 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 infowindow.open(map);\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\":\"http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/pink-jelly-icons-arrows/009173-pink-jelly-icon-arrows-triangle-solid-left.png\"},{\"lat\":49.265311, \"lng\":-123.148146, \"description\":\"awefa\", \"iconUrl\":\"http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/pink-jelly-icons-arrows/009173-pink-jelly-icon-arrows-triangle-solid-left.png\"}]","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 {{payload.lat 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:

 ![Captura de pantalla de 2021-05-14 14-16-26](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/eff2dbcea62d853ee896ec2ab21937c4364e049f.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 May 2021 12:27 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/8 "2021-05-14T12:27:23Z")

</div>

As I said, it works - this is from your screen shot.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e0377f8a2e5cc276997253e48211b1d9554075a0.png)

It only looks different because I **clicked** the expander...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/325b13d17f003b2a3ea692837bbae77bae7af541.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 May 2021 12:30 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/9 "2021-05-14T12:30:32Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/011cb7ef89cfb77d8eac3895241c85b6b091dc04.png)

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

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [14 May 2021 12:36 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/10 "2021-05-14T12:36:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [14 May 2021 12:37 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/11 "2021-05-14T12:37:50Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 May 2021 12:41 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/12 "2021-05-14T12:41:29Z")

</div>

> [@quemf](#):
>
> 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

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  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f79be5b3549c08b7828f513fa23999d5cd77ce67.png)

---

<div class="post-metadata">

**Author:** ![Ranki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ranki/32/41282_2.png) [@Ranki](https://discourse.nodered.org/u/Ranki)\
**Post date:** [14 May 2021 13:22 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/13 "2021-05-14T13:22:32Z")

</div>

> [@quemf](#):
>
> 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

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

Cheers  
Ranki

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [14 May 2021 22:09 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/14 "2021-05-14T22:09:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [18 May 2021 09:30 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/15 "2021-05-18T09:30:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [18 May 2021 09:48 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/16 "2021-05-18T09:48:10Z")

</div>

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:/registry.npmjs.org/node-red-cotrib-web-worldmap/-/node-red-contrib-web-worldmap-2.13.4.tgz failed, reason: getaddrinfo EAI\_AGAIN [registry.npmjs.org](http://registry.npmjs.org)

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 May 2021 10:12 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/17 "2021-05-18T10:12:00Z")

</div>

> [@quemf](#):
>
> I get the information, but the map does not show any location

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

  
  

> [@quemf](#):
>
> I get a EAI\_AGAIN

> [@quemf](#):
>
> And I do not find a solution for this

There are [thousands of results](https://www.google.com/search?q=eai_again+npm) 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 8.8.8.8` ?
- Can you `curl www.google.com`?

---

<div class="post-metadata">

**Author:** ![quemf](https://avatars.discourse-cdn.com/v4/letter/q/97f17d/32.png) [@quemf](https://discourse.nodered.org/u/quemf)\
**Post date:** [18 May 2021 15:01 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/18 "2021-05-18T15:01:07Z")

</div>

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!!!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 June 2021 15:01 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-template-node/45639/19 "2021-06-01T15:01:44Z")

</div>

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