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}]
kak eko 