# Get value from javascript in template

**URL:** <https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322>\
**Category:** General\
**Created:** [4 August 2023 14:54 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322 "2023-08-04T14:54:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [4 August 2023 14:54 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/1 "2023-08-04T14:54:29Z")

</div>

Hi  
I have found some examples using Google places API to autocomplete an address.  
And I want to get the lat / lon from the returned result.  
I'm struggling with getting the lat/lon values back in msg.payload.xxx.  
I can fine see the values in "console.log" (F12), but how do I get this console.log into something i can process.

```auto
[{"id":"326bdf59fd90dd51","type":"template","z":"bd6851c447e9acc8","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"// This sample requires the Places library. Include the libraries=places\n// parameter when you first load the API. For example:\n// <script\n// src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\">\nfunction initMap() {\n const node = this;\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: { lat: -33.8688, lng: 151.2195 },\n zoom: 13,\n });\n const input = document.getElementById(\"pac-input\");\n // Specify just the place data fields that you need.\n const autocomplete = new google.maps.places.Autocomplete(input, {\n fields: [\"place_id\", \"geometry\", \"name\", \"formatted_address\"],\n });\n\n autocomplete.bindTo(\"bounds\", map);\n map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);\n\n const infowindow = new google.maps.InfoWindow();\n const infowindowContent = document.getElementById(\"infowindow-content\");\n\n infowindow.setContent(infowindowContent);\n\n const geocoder = new google.maps.Geocoder();\n const marker = new google.maps.Marker({ map: map });\n\n marker.addListener(\"click\", () => {\n infowindow.open(map, marker);\n });\n autocomplete.addListener(\"place_changed\", () => {\n infowindow.close();\n\n const place = autocomplete.getPlace();\n\n if (!place.place_id) {\n return;\n }\n\n geocoder\n .geocode({ placeId: place.place_id })\n .then(({ results }) => {\n map.setZoom(11);\n map.setCenter(results[0].geometry.location);\n // Set the position of the marker using the place ID and location.\n // @ts-ignore TODO This should be in @typings/googlemaps.\n marker.setPlace({\n placeId: place.place_id,\n location: results[0].geometry.location,\n });\n marker.setVisible(true);\n infowindowContent.children[\"place-name\"].textContent = place.name;\n infowindowContent.children[\"place-id\"].textContent = place.id;\n infowindowContent.children[\"place-address\"].textContent =\n results[0].formatted_address;\n infowindow.open(map, marker);\n\n // Here you can get your coordinates like this\n console.log(place.geometry.location.lat());\n console.log(place.geometry.location.lng());\n console.log(\"Test\");\n \n })\n .catch((e) => window.alert(\"Geocoder failed due to: \" + e));\n });\n}\n\nwindow.initMap = initMap;","output":"str","x":1106.0000534057617,"y":858,"wires":[["ad0566d863a022b4"]]}]

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [5 August 2023 07:09 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/2 "2023-08-05T07:09:38Z")

</div>

Google places API is a paid service for which you need an API key - if this would be possible without it, there wouldn't be much of a business case.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 August 2023 08:47 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/3 "2023-08-05T08:47:12Z")

</div>

> [@grawsom](#):
>
> I can fine see the values in "console.log" (F12), but how do I get this console.log into something i can process.

Can you show us the output of your function?

---

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [5 August 2023 09:49 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/4 "2023-08-05T09:49:52Z")

</div>

_Background, I want to use a MAP API, where you can see the map, but also with "Satelite layer"._  
_My hope is to make this "app" in NR, where you can point on map, or input the address, and then get lat/lon returned, so I can send that info and some other to a navigation unit ._  
_So Google was my first choise, because of the examples._  
_Others stuff I'm trying is LeafLet, with different combination Geoapify, LocationIQ, Nominatim and what I else can find._

My example is based of an combination of [this](https://github.com/phyunsj/node-red-custom-dashboard-map-page) and then the autocomplete from [google](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete)  
with some small modifications.  
I don't have any "funktions" just the flow from first ex.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe71d7bc63f4f64c4a4d049a8f9c41214e0e7534.png)

So I'm mostly looking for howto get (concole.log) in NR flow and not only in browser log.

@bakman2 - yes I know I need a API key (witch I have), but from my understanding, it's free when you only use address/position info.  
And also when this is up and running - we then talked 1-100 req. pr. month.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 August 2023 11:13 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/5 "2023-08-05T11:13:49Z")

</div>

You could use the web sockets to link between node-red and the client side Javascript.  
This [example flow](https://flows.nodered.org/flow/8666510f94ad422e4765) should help.

---

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [5 August 2023 11:27 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/6 "2023-08-05T11:27:39Z")

</div>

I will look into that, seems like it's just what I'm look for.  
Thanks

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 August 2023 11:32 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/7 "2023-08-05T11:32:25Z")

</div>

You could also possible use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) client side to send a http request to a node-red endpoint.

---

<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:** [4 October 2023 11:33 UTC](https://discourse.nodered.org/t/get-value-from-javascript-in-template/80322/8 "2023-10-04T11:33:03Z")

</div>

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