Forum Discussion

JordanMcAlister's avatar
JordanMcAlister
Qrew Captain
5 years ago

Embed Google Maps in Form

Does anyone know how to do this?

I can do a static image using:

"<img src= " &
"https://maps.googleapis.com/maps/api/staticmap?" & "center=" & URLEncode([Address) & "&zoom=" & [zoom] & "&size=" & [width] & "x" & [height] & "&maptype=" & [type] & "&format=" & [format] & "&markers=color:" &[pin color] & "%7Clabel:" & [pin label] & "%7C" & URLEncode([Address]) &  "&key=APIKEY" & ">" 

but I was trying to do this with a interactive map box or something using this from Google's site:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body> </html>



I tried putting this in a code page and calling to it using the iol method, but it doesn't show anything. Anyone have any ideas?

10 Replies

  • When i put the code from the Google site into a code page and view it, I get these errors in the console:



    You need to get an API key and put it in the script:



    You will also need to enable the Google maps JavaScript API. Once you do these two things you should be good to go:

    • JordanMcAlister's avatar
      JordanMcAlister
      Qrew Captain
      I do have an API key and use it in my real code, and I have the script enabled - I just didn't include it in the code above.
    • AdamKeever1's avatar
      AdamKeever1
      Qrew Commander
      Make a field formula rich text field and <iframe> the code page:

      "<iframe src = h t t p s://XXXX.quickbase.com/db/XXXX?a=showpage&pageID=2>\n</iframe>"

      Then make a report link field and define the field relationship:



      Then add the report link field to your form:

    • JordanMcAlister's avatar
      JordanMcAlister
      Qrew Captain
      I'm wondering if I'm doing it right. what "db" are you using for the iframe? Is it the db of the table or of the "home" where the code page is located? Here is what currently happens: