How to embed google map at node-red ui template


This is some example how to embed google map at your template for node-red ui dashboard, hope this help and don’t forget to add your own key for google map at gmap template

Good Luck

Happy Coding

Salam ngoprek

[{"id":"cab47749.47c698","type":"inject","z":"322d96d4.be125a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":560,"wires":[["c80c476c.d450c8"]]},{"id":"c80c476c.d450c8","type":"function","z":"322d96d4.be125a","name":"map","func":"\nvar latitude =-6.21462;\nvar longitude =106.84513;\n\n\nmsg.payload = {latitude, longitude}\n\n\nreturn msg;","outputs":1,"noerr":0,"x":470,"y":560,"wires":[["22edf841.88a418"]]},{"id":"22edf841.88a418","type":"ui_template","z":"322d96d4.be125a","group":"8add4fe8.53baf","name":"GMAP","order":3,"width":"6","height":"6","format":"<!DOCTYPE html>\n<html>\n  <head>\n    <style>\n       /* Set the size of the div element that contains the map */\n      #map {\n        height: 100%;  /* The height is 400 pixels */\n        width: 100%;  /* The width is the width of the web page */\n       }\n    </style>\n  </head>\n  <body>\n\n    <!--The div element for the map -->\n    <div id=\"map\"></div>\n \n\n<script>  \n\nvar latitude;\nvar longitude;\n\n(function(scope) {\n        //Have to use $watch so we pick up new, incoming msg's\n        scope.$watch('msg.payload', function() {\n\n        initMap(scope.msg.payload)     \n            \n        })\n\n\n    })(scope)\n    \n\n\n\n// // // Initialize and add the map\n function initMap(data) {\n\n  \n  var latitude = data.latitude\n  var longitude = data.longitude\n  \n  console.log(latitude);\n  console.log(longitude);\n  \n  var jakarta = {lat:latitude , lng: longitude };\n\n\n  var map = new google.maps.Map(\n      document.getElementById('map'), {zoom: 18, center: jakarta, mapTypeId: 'satellite'});\n\n  var marker = new google.maps.Marker({position: jakarta, map: map});\n}\n\n    </script>\n\n    <script async defer\n    src=\"https://maps.googleapis.com/maps/api/js?key=<yourkeyhere>&callback=initMap\">\n    </script>\n\n  </body>\n</html>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":690,"y":560,"wires":[["92a07c8.8e7118"]]},{"id":"92a07c8.8e7118","type":"debug","z":"322d96d4.be125a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":870,"y":560,"wires":[]},{"id":"8add4fe8.53baf","type":"ui_group","z":"","name":"Pictures","tab":"c23383c7.b69a7","order":1,"disp":false,"width":"6","collapse":false},{"id":"c23383c7.b69a7","type":"ui_tab","z":"","name":"LIGHTING PLANT","icon":"dashboard","order":2}]