1 2 Previous Next 25 Replies Latest reply on Jun 13, 2016 9:28 PM by user19752

    Google maps wants IFrame

    anthonyb

      I have been using google maps to display customers addresses (roadview) in web viewer in Filemaker but apparently Google maps has changed something and now I get the massage: The Google Maps Embed API must be used in an iframe.

      This is the code that I am using: "http://maps.google.com/maps?q=" & BV_CustomerAddress::Street1 & "," & BV_CustomerAddress::City& "," & BV_CustomerAddress::State& "," & BV_CustomerAddress::PostalCode& "&z=" & 15 & "&output=embed&iwloc=0"

       

      Could someone show me how to embed an IFrame in Filemaker so that this will still work?

        • 1. Re: Google maps wants IFrame
          taylorsharpe

          If you want more power in what you do in your web portal, try writing your own html for the web portal instead of just a URL.  You have to start it out with "data:text/html,<!DOCTYPE html>" for it to work.  You can do a lot more than just in a URL.  A Google maps example is:

           

           

          data:text/html,<!DOCTYPE html>

          <html> 

          <head> 

            <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

            <title>Google Maps Multiple Markers</title> 

            <script src="http://maps.google.com/maps/api/js?sensor=false

                    type="text/javascript"></script>

          </head> 

          <body>

            <div id="map" style="width: 980px; height: 580px;"></div>

           

            <script type="text/javascript">

              var locations = [

          ['Taylor Made Services<br>TMS HQ<br>Dallas<br>', , , '341012CC-F186-9A43-A150-58F33F16489C|42EAA8A9-BEAA-4687-9C06-477BDD0E9EBB'],

          ['Taylor Made Services<br>TMS Mfg Houston<br>Houston<br>', 29.7555539, -95.3660499, '341012CC-F186-9A43-A150-58F33F16489C|E1E9D7A7-31D0-459D-8930-A760F41DB67A'],

          ['Taylor Made Services<br>TMS Mfg Austin<br>Austin<br>', 30.270096, -97.749735, '341012CC-F186-9A43-A150-58F33F16489C|D5C0076F-61AB-4934-8BD6-AE7504E07926']

              ];

           

              var map = new google.maps.Map(document.getElementById('map'), {

                zoom: 2,

                center: new google.maps.LatLng(30.2700960, -97.7497350),

                mapTypeId: google.maps.MapTypeId.ROADMAP

              });

           

              var infowindow = new google.maps.InfoWindow();

           

              var marker, i;

           

              for (i = 0; i < locations.length; i++) {  

                marker = new google.maps.Marker({

                  position: new google.maps.LatLng(locations[i][1], locations[i][2]),

                  map: map,

                  html:  locations[0]

                });

           

                google.maps.event.addListener(marker, 'click', (function(marker, i) {

                  return function() {

                    infowindow.setContent(locations[i][0]);

                    infowindow.open(map, marker);

                  }

                })(marker, i));

              }

            </script>

          </body>

          </html>

          • 2. Re: Google maps wants IFrame
            anthonyb

            I will have to let my IT guy look at this, It is a little complicated for me. I though there may be some way just to add IFrame tags to the existing code which was working fine originally. All I am trying to do is produce the roadview in the web portal at a particular zoom level.

            • 3. Re: Google maps wants IFrame
              taylorsharpe

              Really what you want is a web developer that knows the Google Maps API because you are essentially make a web page.  If you "IT guy" is just some server/network guy, he probably won't be much help.  I am not a pro at it, but I taught myself most of it with Google Maps API web page which is reasonably user friendly. 

               

              Your iFrame reference is in the Google Maps API guide at:  https://developers.google.com/maps/documentation/embed/guide

              1 of 1 people found this helpful
              • 4. Re: Google maps wants IFrame
                beverly

                Clarify:

                data: ...

                (Data URI, dataURL, data protocol)

                does NOT require the full HTML - it is intended for 'snippets' so just the parts for display are necessary

                 

                http://en.wikipedia.org/wiki/Data_URI_scheme

                 

                 

                -- sent from my iPhone4 --

                Beverly Voth

                --

                • 5. Re: Google maps wants IFrame
                  steve_ssh

                  Hello Anthony,

                   

                  You might take a look at the following post by francishunger:

                   

                  https://fmdev.filemaker.com/message/142598

                   

                  Midway down the page of this thread, there is a post that indicates that Francis may have successfully worked around the scenario that you have encountered.

                   

                  HTH & best,

                   

                  -steve

                  • 6. Re: Google maps wants IFrame
                    taylorsharpe

                    Here is a simple single location workaround to set the web portal equal to assuming field names are renamed accordingly:

                     

                     

                    If ( not IsEmpty ( Interactions::GPS Latitude ) and not IsEmpty ( Interactions::GPS Longitude ) ;

                     

                    "data:text/html,<!DOCTYPE html>

                              ¶<html>

                              ¶<head>

                              ¶  <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />

                              ¶  <title>Google Maps Multiple Markers</title>

                              ¶  <script src=\"http://maps.google.com/maps/api/js?sensor=false\"

                              ¶          type=\"text/javascript\"></script>

                              ¶</head>

                              ¶<body>

                              ¶  <div id=\"map\" style=\"width: 670px; height: 430px;\"></div>

                              ¶

                              ¶  <script type=\"text/javascript\">

                     

                     

                              ¶  var locations = [¶" &

                                    "['" & Contacts::Name Full & "'," & Interactions::GPS Latitude & "," & Interactions::GPS Longitude & ",1]

                              ¶    ];

                              ¶

                              ¶    var map = new google.maps.Map(document.getElementById('map'), {

                              ¶      zoom: 15,

                              ¶      center: new google.maps.LatLng(" & Interactions::GPS Latitude & "," & Interactions::GPS Longitude &"),

                              ¶      mapTypeId: google.maps.MapTypeId.ROADMAP

                              ¶    });

                              ¶

                              ¶    var infowindow = new google.maps.InfoWindow();

                              ¶

                              ¶    var marker, i;

                              ¶

                              ¶    for (i = 0; i < locations.length; i++) { 

                              ¶      marker = new google.maps.Marker({

                              ¶        position: new google.maps.LatLng(locations[i][1], locations[i][2]),

                              ¶        map: map,

                              ¶        html:  locations[0]

                              ¶      });

                              ¶

                              ¶      google.maps.event.addListener(marker, 'click', (function(marker, i) {

                              ¶        return function() {

                              ¶          infowindow.setContent(locations[i][0]);

                              ¶          infowindow.open(map, marker);

                              ¶        }

                              ¶      })(marker, i));

                              ¶    }

                              ¶  </script>

                              ¶</body>

                              ¶</html>"

                     

                     

                    )

                     

                     

                    // formerly was:  If ( not IsEmpty ( Interactions::GPS Latitude ) and not IsEmpty ( Interactions::GPS Longitude ) ; "http://local.google.com/maps?" & "q=" & Interactions::GPS Latitude & "," & Interactions::GPS Longitude & "&output=embed&iwloc=0" )

                    • 7. Re: Google maps wants IFrame
                      databuzz

                      Hi Anthony,

                       

                      I was also affected by this change - I've found that changing the last part of the URL to this:

                       

                      &output=svembed&iwloc=0

                       

                      appears to resolve the issue for me at least.

                       

                      Let me know if that works for you as well.

                       

                      cheers,

                      Andrew

                       

                      FileMaker 12/11/10/9/8 Certified Developer

                      Databuzz

                      - - - - - - - - - - - - - - - - -

                      Phone: +61 2 9484 6565

                      Mobile: +61 418 468 103

                      Email: andrew@databuzz.com.au

                      http://www.databuzz.com.au

                      • 8. Re: Google maps wants IFrame
                        Paul Jansen

                        Hi,

                         

                        This looks very interesting and reasonably understandable.  I have one question....

                         

                        ['Taylor Made Services<br>TMS Mfg Houston<br>Houston<br>', 29.7555539, -95.3660499, '341012CC-F186-9A43-A150-58F33F16489C|E1E9D7A7-31D0-459D-8930-A760F41DB67A'],

                         

                         

                        Can you tell me where the bold italic data  in the line above comes from?

                         

                        Thanks

                         

                        PJ

                        • 9. Re: Google maps wants IFrame
                          taylorsharpe

                          Those are just record UUIDs.  They could be serial numbers or whatever you want them to be to identify what the FileMaker unique record key is.  I put this in so that I can web scrape and go back and find the original FileMaker record.  It is not needed for the mapping though. 

                           

                          PS:  You'll note I put two UUIDs concactinated for each line so I could tell the parent company UUID as well as the location UUID since there can be multiple locations for a given company. 

                          • 10. Re: Google maps wants IFrame
                            taylorsharpe

                            Awesome, databuzz.  That will help out most people that just need to map a simple URL.  Great answer!

                            • 11. Re: Google maps wants IFrame
                              anthonyb

                              I have found that by increasing the web viewer size to about 640px x 640px then right clicking and setting up the google (US)  choosing fields address,city,state,zip it works fine. Not only does it give you a beautiful map but also a picture of the customers home. If you keep the web viewer size to a certain size you won't see google trying to help you find a pizza, etc... plus it is interactive and you will be able to click on it and print a nice map along with a picture of your customers home. I have also found that google has static address links as well. Possibly without the advertising. Google also offers a paid version of their mapping software which I am sure would be ad free.

                              • 12. Re: Google maps wants IFrame
                                anthonyb

                                I just added your code, it works wonderfully. I guess the sv is for secure version.

                                 

                                Thank You

                                 

                                Anthony

                                • 13. Re: Google maps wants IFrame
                                  user18884

                                  Thanks, it worked perfectly!

                                   

                                  Juan

                                  • 14. Re: Google maps wants IFrame
                                    ajayz

                                    Hi.. I was wondering if you can give me a hand as i'm having trouble with my maps.. They just stopped displaying and now show the following error:  "The google maps embed API must be used in an iframe"

                                     

                                    My code was:

                                    "http://local.google.com/maps?" & "q=" & /*Address=*/ Company_Details::Address & "," & /*City=*/ Company_Details::Surburb & "," & /*State=*/ Company_Details::State & "," & /*Zip Code=*/ Company_Details::Postcode & "," & /*Country=*/ "Australia" &"&output=svembed&iwloc=0"

                                     

                                    I can sort of get it to work if I removed: "&output=svembed&iwloc=0"    However, the map is displayed with google's overlay search window etc.. I'm after just a nice clean map with the location marked.

                                     

                                    Mapping.png

                                    1 2 Previous Next