Template Node to embed Google Maps

Dashboard
1

Hi folks,
first of all thanks for the dashboard template node! I think it is a great tool which offers huge flexibility in creating dashboards.

Today I tried creating a complex dashboard that has also a section where a google maps view is embedded with some overlay polygons.
I was not familiar with google maps API before, but it is quite well documented and I was able to get the result done outside of node-red.

Using the template node in node-red I wanted to start with embedding a standard example from Google's developer documentation:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

This example works perfectly on https://codepen.io/pen/ (after replacing the API_KEY with my key of course)

Putting the same code into the template node didn't work out though.
The ampersand after the "API_KEY" string was not accepted by the template node and was leading to an error: "Named entity expected, got none".
I didn't know how to deal with this best, so I tried to encode the & with &amp. This seems to be accepted - at least the error is gone now.
But nothing is displayed in the dashboard afterwards. Also the browsers console does not show any thing helpful to me - though there is an error:

SideNav 'left' is not available! Did you use md-component-id='left'?)

I don't know if this has anything to do with the issue, though...

Do you have any idea what might be the reason behind the missing display of the map and how to deal with it?
Thanks a lot
andor

2

Well of course.... I'm bound by contract to suggest ... why not use node-red-contrib-web-worldmap that is already integrated into dashboard...

3

@dceejay
Thanks for suggesting this and I thought this might come up :slight_smile: - but one boundary is that I have to use the template node in this case.

4

err ... why ? I can see you are using it but what impels you to do so ?

5

one simple reason: the target instance where the dashboard will be running is a managed node-red environment and does not provide the option to install custom nodes for users like me. The only node available to realize my requirement is using the template node. It is what it is... so the primary question remains :slight_smile:

6

uurgh... not nice...
maybe try url encoding & as &amp;

1 Like
7

@dceejay
well, that seems to do the trick :innocent:. next time just state it in the first place :joy:
Thank's a lot! :clap: :clap:
How did you know that or where could I have looked that up?

8

if you write code that uses urls you just learn it over time.