Discussions

Expand all | Collapse all

Embed Google Maps in Form

  • 1.  Embed Google Maps in Form

    Posted 07-17-2019 17:22
    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?



  • 2.  RE: Embed Google Maps in Form

    Posted 07-17-2019 17:56
    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:



  • 3.  RE: Embed Google Maps in Form

    Posted 07-17-2019 18:46
    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.


  • 4.  RE: Embed Google Maps in Form

    Posted 07-17-2019 19:28
    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:

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1798041/RackMultipart20190717-86899-13n3tie-image_inline.png?1563391585">

    Then add the report link field to your form:



  • 5.  RE: Embed Google Maps in Form

    Posted 07-18-2019 13:02
    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:


  • 6.  RE: Embed Google Maps in Form

    Posted 07-18-2019 13:19
    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.



  • 7.  RE: Embed Google Maps in Form

    Posted 07-18-2019 14:45
    That was it! it works, thanks!
    How do I make the iframe bigger and the map bigger?


  • 8.  RE: Embed Google Maps in Form

    Posted 07-18-2019 15:34
    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>"

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1798180/RackMultipart20190718-101205-152hfl9-image_inline.png?1563464950">


  • 9.  RE: Embed Google Maps in Form

    Posted 07-18-2019 17:40
    perfect! thanks again