# Template Node to embed Google Maps

**URL:** <https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362>\
**Category:** Dashboard\
**Created:** [15 January 2020 11:53 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362 "2020-01-15T11:53:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![andor](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@andor](https://discourse.nodered.org/u/andor)\
**Post date:** [15 January 2020 11:53 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/1 "2020-01-15T11:53:45Z")

</div>

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:

```auto
<!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/](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

---

<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:** [15 January 2020 13:25 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/2 "2020-01-15T13:25:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andor](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@andor](https://discourse.nodered.org/u/andor)\
**Post date:** [15 January 2020 13:39 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/3 "2020-01-15T13:39:26Z")

</div>

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

---

<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:** [15 January 2020 13:42 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/4 "2020-01-15T13:42:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andor](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@andor](https://discourse.nodered.org/u/andor)\
**Post date:** [15 January 2020 13:58 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/5 "2020-01-15T13:58:39Z")

</div>

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 🙂

---

<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:** [15 January 2020 16:22 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/6 "2020-01-15T16:22:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andor](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@andor](https://discourse.nodered.org/u/andor)\
**Post date:** [15 January 2020 16:41 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/7 "2020-01-15T16:41:18Z")

</div>

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

---

<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:** [15 January 2020 16:55 UTC](https://discourse.nodered.org/t/template-node-to-embed-google-maps/20362/8 "2020-01-15T16:55:32Z")

</div>

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