9 Replies Latest reply on Sep 26, 2015 11:58 AM by ibrahim_bittar

    Google Chrome for Mac and PC

    taylorsharpe

      I have a web viewer with Google Maps in it.  It works great in FileMaker Pro 13 and 14.  But it has problems in WebDirect on a Mac or PC using Google Chrome (v45) using FMS 14.0v2 on Mac Pro (Cylinder) with OS X 10.10.5.  It just gives a blank white space.  However, it does work fine in Safari on Mac or IE for Windows.  Surprisingly, it works fine on Google Chrome on an iPhone.  It also works with Safari on the iPhone. 

       

      Does anyone have a suggestion as to why Google Chrome on a Mac or PC doesn't like this code?  Is there something I can change on it to make it also work on Chrome for Mac or PC?  Thanks for any suggestions. 

       

       

       

       

      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: 822px; height: 512px;"></div>

          <script type="text/javascript">

           var locations = [

       

       

      ['Dallas Business<br>33333 Some Road, Suite 280<br>Dallas, TX  75830-6179<br><br>214-999-9999<br>www.google.com', 32.7081116, -97.80543329999999, 'http://www.google.com/mapfiles/marker.png', ' ' ],

      ['ACME Records<br>333 Davis Street<br>Springfield, MO  63105<br><br>333-444-5555<br>www.google.com', 30.7497621, -98.83701699999999, 'http://www.google.com/mapfiles/marker.png', ' ' ]

         ];

       

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

             zoom: 10,

             center: new google.maps.LatLng(32.82893685,-96.82122514999999),

             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,

               icon: locations[i][3]

             });

       

             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>

        • 1. Re: Google Chrome for Mac and PC
          TSPigeon

          Taylor Sharpe:

           

          Thank you for your post.

           

          I was unable to reproduce this behavior with FileMaker Server 14.0.2’s WebDirect in Google Chrome (v45) on Windows 7 and Mac OS X 10.9.5 or newer. To attempt to reproduce I followed these steps:

           

          1. Created “test.fmp12”

          2. Created Web viewer on default layout

          3. Pasted your “calculation” into my Web Viewer Calculation

          4. Uploaded to FileMaker Server 14.0.2

          5. Setup “test.fmp12” for WebDirect

          6. Accessed via Chrome (v45) and viewed data in Web viewer as expected

          -Tested this in Windows 7 Professional, Windows 10, Mac OS X 10.9.5, and Mac OS X 10.10.5.

          -Tested this on FileMaker Server 14.0.3 as well, with no issue.

           

          You might try reproducing this issue in a new file?

           

          Please let me know if you have further information needed to reproduce.

           

          TSPigeon

          FileMaker, Inc.

          • 2. Re: Google Chrome for Mac and PC
            steve_ssh

            Hi Taylor,

             

            I hope the following info will be of help for you to solve this:

             

            1) I copied your code out of this post, and I was able to reproduce the symptom:

                 - White box in Chrome v.45 (OS X Yosemite)

                  - Expected content displayed using Safari.


            2) This was not a perfect test to match your case, as I did not use FMP and WebDirect; I simply dropped your code into an iframe of a static HTML page to simulate the rendering that would happen in WebDirect.


            3) Despite the differences between my test and your scenario, I strongly suspect that we are looking at the same issue.


            4) I was able to fix this, and have the proper expected display in Chrome by taking the code I copied from you, and using a text editor to remove unwanted hidden chars that I believe had somehow found their way into your code.  Safari was ignoring these chars; Chrome was not.


            5) The reason that I knew to try this was that I used Chrome developer tools to read the console and discover an error message indicating there was an illegal character in the page content.  Further poking around in the developer tools allowed me to see where Chrome was encountering these characters.


            6) To clean up the code, I used Text Wrangler's "Zap Gremlins" feature to remove the unwanted chars (non-ascii and control characters).  I then took the cleaned up code and re-inserted it into my iframe container page.  Whereas it had displayed the white box before, it now worked fine.


            7) Though it is certainly plausible that the unwanted chars were picked up somehow in the process of you posting your code and me copying it, I'd nonetheless strongly suggest that you investigate the possibility that your code has such unwanted chars.  At best, you fix the problem, and, at worst, at least you can rule out a reasonable theory.


            I'll attach some screenshots to help illustrate what I describe here.


            Hope this helps, best wishes, and good luck!


            -steve



            Using the error console to get a clue about what went wrong:

            check for error.png


            Actually seeing Chrome represent some of the unwanted "gremlin" chars:

            see unwanted chars.png


            After removing the chars, the file displayed as expected:

            after cleanup.png

            • 3. Re: Google Chrome for Mac and PC
              taylorsharpe

              Thank you TS Pigeon and Steve.  I created the code using FM's text calculation.  Maybe I can run a Filter to make sure only standard ASCII characters are there.  I won't be able to test it until Friday, but thanks for some direction. 

              • 4. Re: Google Chrome for Mac and PC
                Benjamin Fehr

                html is definitely not my core discipline.

                I'm not sure if Webdirect uses iFrames. And if though, could there be a conflict when using OR not using iFrame within your html-code?

                • 5. Re: Google Chrome for Mac and PC
                  taylorsharpe

                  I'm still having problems.  I added this to the code to the let statement where I got a list of web safe ASCII characters:

                   

                  ASCII = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 !\"#$%&'()[]*+,-./:;<=>?@[\]^_`{|}~" ;

                  HTML = Substitute ( F8 ; [ Char ( 9 ) ; "  " ] ; [ Char ( 13 ) ; "  " ] ) ;

                  HTML = Filter ( HTML ; ASCII ) ;

                   

                  This resulted in this code that I mapped:

                   

                  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: 822px; height: 512px;"></div>      <script type="text/javascript">       var locations = [    ['Dallas Audio Concepts<br>11661 Preston Road, Suite 280<br>Dallas, TX  75230-6179<br><br>214-360-9520<br>www.audioconceptsonline.com', 32.9081116, -96.80543329999999, 'http://www.google.com/mapfiles/marker.png', ' ' ],  ['Spinster Records<br>829 W Davis Street<br>Dallas, TX  75208<br><br>323-304-4341<br>spinsterrecords.com', 32.7497621, -96.83701699999999, 'http://www.google.com/mapfiles/marker.png', ' ' ],  ['Anointed Soundz<br>5145 Lake Ridge Pkwy., #127<br>Grand Prarie, TX  75052<br><br>469-245-1098<br>www.ashometheater.com', 32.650529, -97.0441263, 'http://www.google.com/mapfiles/marker.png', ' ' ]     ];          var map = new google.maps.Mapdocument.getElementById'map', {         zoom: 10,         center: new google.maps.LatLng32.7694675666666667,-96.8955255333333267,         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.LatLnglocations[i][1], locations[i][2],           map: map,           icon: locations[i][3]         };            google.maps.event.addListenermarker, 'click', functionmarker, i {           return function {             infowindow.setContentlocations[i][0];             infowindow.openmap, marker;           }         }marker, i;       }     </script>   </body>   </html> 

                   

                   

                  This code still works on Safari and IE and Chrome Mobile, but it does not work on Chrome Mac (don't have a PC to test Chrome PC tonight, but previous test before this filtering it did not work).  But with the Filter with ASCII safe characters sure makes this seem to have only web safe characters.  Are there any characters in the ASCII safe filter that I should remove?  It is just weird it won't work in non-mobile Chrome but works everywhere else.

                   

                  Thanks for any suggestions.

                  • 6. Re: Google Chrome for Mac and PC
                    steve_ssh

                    Hi Taylor,

                     

                    Thanks for being willing to pursue the line of thought regarding possible bad characters.  I hope I'm not leading you down the wrong path in that regard (though I do think it is worth checking).

                     

                    Here are some ideas:

                     

                    1) When viewing the failing page in WebDirect with Chrome:  Use the Chrome developer tools (located under the View menu) to check the error console, and see if there is any helpful error message that is being logged.  This is probably the most direct way possible to get a real grasp on what is going wrong.  This is something that could potentially save hours of debugging trial and error.

                     

                    2) Take just your HTML code that you are sending to the WebViewer, and write it to a static .htm file (minus the "data:text/html," portion).  Load this file into various browsers, and see which ones render it properly, and which do not.  Again, if/when it fails in Chrome, use the developer tools to see what kind of error may have been logged.

                     

                    3) If you have the time and inclination to do so, you could try reproducing the problem in a simple file that you could post here on the community.  I'd be happy to take a look to see if I can be of any help, and I'm sure I wouldn't be the only one willing to lend a hand.  No worries if this is something that can't be done -- it's just an idea and offer.

                     

                    Thanks for posting back with your progress on this.

                     

                    As always, best regards,

                     

                    -steve

                    • 7. Re: Google Chrome for Mac and PC
                      steve_ssh

                      p.s.  Taking a closer look at the code you posted:

                       

                      It looks as though parenthesis characters have been eaten/removed.

                       

                      I don't know if this is just in the post to the forum, or whether it happened prior to that.  It's hard to imagine that the code as I see it above would function as expected in any browser -- As I see it, the script would be broken and would not be likely to render your map.

                       

                      I do see that you have included parenthesis characters in your ASCII whitelist, so I understand that they should not be filtered out, yet whereas the code in your original post contains '(' and ')' chars, the code in your more recent message does not...

                      • 8. Re: Google Chrome for Mac and PC
                        taylorsharpe

                        Oh rats.  I initially made that mistake and then corrected the filter, but failed to paste the html from the corrected version.  My bad.  Here it 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: 822px; height: 512px;"></div>      <script type="text/javascript">       var locations = [    ['Dallas Audio Concepts<br>11661 Preston Road, Suite 280<br>Dallas, TX  75230-6179<br><br>214-360-9520<br>www.audioconceptsonline.com', 32.9081116, -96.80543329999999, 'http://www.google.com/mapfiles/marker.png', ' ' ],  ['Spinster Records<br>829 W Davis Street<br>Dallas, TX  75208<br><br>323-304-4341<br>spinsterrecords.com', 32.7497621, -96.83701699999999, 'http://www.google.com/mapfiles/marker.png', ' ' ]     ];          var map = new google.maps.Map(document.getElementById('map'), {         zoom: 10,         center: new google.maps.LatLng(32.82893685,-96.82122514999999),         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,           icon: locations[i][3]         });            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> 

                        • 9. Re: Google Chrome for Mac and PC
                          ibrahim_bittar

                          Actually it does, I demonstrated it in a session this last Devcon.

                           

                          However, Chrome is VERY picky regarding special characters, quotes, etc.

                           

                          Taylor, here is my work file I used at the Devcon session. Hopefully the video is uploaded too.

                           

                          Hope you find it useful.