Map widget - open Google maps

How I can open google maps using my Map widget?

My link under button:,21.6083471,3634m/data=!3m1!1e3

I know why I have this error - Google block iframe ( html - How to show in an iframe? - Stack Overflow ) but at Tago I do not have access to request headers. How we can avoid it and start using google maps at iFrame at Tago?
Moreover, I can force open it at new tab (not iFrame)?

Hi @sosnus15 ,
Unfortunately Google Maps cannot be indexed as an IFrame, they have their own API to add the map to your site: Getting started with Google Maps Platform  |  Google Developers

The widget called Custom can add Google Maps

1 - You will need an access key to the API, you can get by following this tutorial: Using API Keys  |  Maps JavaScript API  |  Google Developers

2 - In the code I made below, you will need to change the xxxxx value by your API key

<!DOCTYPE html>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src=""></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="./style.css?v=2">
    <div class="root">

      <div id="map"></div>


      window.TagoIO.onStart((t) => {
        let MY_GOOGLE_KEY = "xxxxxxxxxxxxx"; // put your key here
        var script = document.createElement('script');
        script.src = `${MY_GOOGLE_KEY}&callback=initMap`;
        script.async = true;
        script.defer = true;

      // Start map
      function initMap() {
        let initialPosition = {
          lat: 51.4563642,
          lng: 21.6083471
        const initialZoom = 8;
        map = new google.maps.Map(document.getElementById('map'), {
          center: initialPosition,
          zoom: initialZoom,
          mapTypeControl: true,
          mapTypeId: 'satellite',

      #map {
        height: 100%;
        width: 100%;
      a {
        color: #2a6497;
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      .root {
        display: flex;
        width: 100%;
        flex-direction: row;
        height: 100%;


3 - upload the file to Tago Files and copy the URL

4 - create a new custom widget and paste the link you copied
Screenshot from 2021-01-08 09-47-11

5 - save and your widget is ready

Peek 2021-06-21 16-44-min

Google Maps requires a credit card to be added for the “For development purposes only” message to disappear

1 Like