Map widget - open Google maps

Hi!
How I can open google maps using my Map widget?


My link under button:
https://www.google.pl/maps/@51.4563642,21.6083471,3634m/data=!3m1!1e3

I know why I have this error - Google block iframe ( html - How to show google.com 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>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://admin.tago.io/dist/custom-widget.min.js"></script>
    <link rel="stylesheet" href="https://admin.tago.io/dist/custom-widget.min.css">
    <link rel="stylesheet" href="./style.css?v=2">
  </head>
  <body>
    <div class="root">

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

    </div>
    <script>
      window.TagoIO.ready();

      window.TagoIO.onStart((t) => {
        let MY_GOOGLE_KEY = "xxxxxxxxxxxxx"; // put your key here
        var script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=${MY_GOOGLE_KEY}&callback=initMap`;
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
      });

      // 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',
        });
      }
    </script>

    <style>
      #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%;
      }
    </style>

  </body>
</html>

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