Embed Google Maps in Form

  • 0
  • 1
  • Question
  • Updated 1 month ago
  • In Progress
  • (Edited)
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?

Photo of Jordan McAlister

Jordan McAlister

  • 1,522 Points 1k badge 2x thumb

Posted 1 month ago

  • 0
  • 1
Photo of Adam Keever

Adam Keever

  • 2,400 Points 2k badge 2x thumb
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:

(Edited)
Photo of Jordan McAlister

Jordan McAlister

  • 1,522 Points 1k badge 2x thumb
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:
Photo of Adam Keever

Adam Keever

  • 2,400 Points 2k badge 2x thumb
It should be the DBID for the app since that is where the code page is. You can open your code page and copy the URL then just replace pageedit with showpage.

What type of page did you use? Do you have .html at the end of the code page name i.e. map.html ? I was able to recreate what is happening to you by deleting the .html from my code page title.

(Edited)
Photo of Jordan McAlister

Jordan McAlister

  • 1,522 Points 1k badge 2x thumb
That was it! it works, thanks!
How do I make the iframe bigger and the map bigger?
Photo of Adam Keever

Adam Keever

  • 2,400 Points 2k badge 2x thumb
Try:

"<iframe src = h t t p s://XXXX.quickbase.com/db/XXXX?a=showpage&pageID=2 ; frameborder=\"0\"; style=\"display: block; width: 1200px; height: 1200px;\">\n</iframe>"


(Edited)
Photo of Jordan McAlister

Jordan McAlister

  • 1,522 Points 1k badge 2x thumb
perfect! thanks again