Google Maps Polygons and App Permissions?

Hi all, I’m new to bubble and programming in general, and I was wondering if you can assist me, I want to draw some interactive polygons on my map for my app but I’m not sure how to do that in bubble, can anyone tell me how?

also I want the app to make a cute little sound whenever the user presses a button, how do i make it so that pressing the button activates the sound?

Hi, bro. I have the same problem. Did you know how to draw interactive polygon? I really wanna know how it can be done :frowning:

Hi guys!
I also need the answer for my app.

Use leaflet in an html block and incorporate the leaflet draw plugin. This code uses MapQuest, but you can switch out map providers to open source: https://leaflet-extras.github.io/leaflet-providers/preview/

<html>
  <head>
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <script src="https://unpkg.com/leaflet-draw@0.4.13/dist/leaflet.draw.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet-draw@0.4.13/dist/leaflet.draw.css"/>

    <script type="text/javascript">
      window.onload = function () {
        L.mapquest.key = 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24';
        var baseLayer = L.mapquest.tileLayer('map');

        var map = L.mapquest.map('map', {
          center: [29.953745, -90.074158],
          layers: baseLayer,
          zoom: 10
        });

        L.control.layers({
          'Map': baseLayer
        }).addTo(map);

        var drawnItems = L.featureGroup().addTo(map);

        map.addControl(new L.Control.Draw({
          edit: {
            featureGroup: drawnItems,
            poly: {
              allowIntersection: false
            }
          },
          draw: {
            polygon: {
              allowIntersection: false,
              showArea: true
            }
          }
        }));

        map.on(L.Draw.Event.CREATED, function (event) {
          var layer = event.layer;

          drawnItems.addLayer(layer);
        })
      }
    </script>
  </head>

  <body style="border: 0; margin: 0;">
    <div id="map" style="width: 100%; height: 530px;"></div>
  </body>
</html>