In last week's post, I described how my journey to build a better Google Map in FileMaker got started. Beginning with this post and the following, I'll be demonstrating and experimenting with several techniques for doing just that.
The first place to start would be to map a Single Address and place it into a Web Viewer without all the Google-centric navigation and UI that normally surrounds the map. Say it together now: "We can do better."
It's actually not that simple. We have to back up a couple steps and talk about how the Web Viewer works for a moment.
To display content in the FileMaker Web Viewer, you have three options (perhaps I'm splitting hairs here, and it's possible I'm omitting some techniques-please comment if you have others). I mentioned these briefly in my first post on this topic. I'll expand on them here.
1) Host the content and open it via a standard http URL within the Web Viewer. This might also include some server-side processing (e.g. PHP) or other techniques.
2) Write the content to disk and open it via a file reference within the Web Viewer.
3) Open the content directly in the Web Viewer calculation engine. This uses the data URI scheme.
Let's show how each of these would work, in turn.
Consider the following simple HTML content (hereafter 'simple.html'):
<HTML>
<TITLE>Proof Group: Example Code</TITLE>
<BODY>This is a Proof Group Example Code document.</BODY>
</HTML>
Using the first technique, you'd simply upload 'simple.html' to a web host. Then, enter the URL in the web viewer for viewing.
http://etc.proofgroup.com/examples/simple.html
The Web Viewer Setup window would look like this:
Rendering to the following in browse mode:
By the way, that URL works. Try it yourself.
The next method is to save that file to your local drive and open it via a file reference. A file reference is a special type of URL that doesn't use http as the protocol (the portion of the URL before the colon) but rather uses file. This differentiates local versus hosted content.
This method does have cross-platform differences, because of the way file paths work on Mac versus PC. Let's say I've saved the 'simple.html' file to my desktop. On Mac, the URL would look something like this:
file:/Users/mike/Desktop/simple.html
On PC, the URL would look something like this:
file:/C:/Documents and Settings/mike/Desktop/simple.html
Enter one of those (depending on your platform) into the Web Viewer Setup calculation (surrounded by quotation marks, of course) and you should get identical results to the hosted variation. If you get an error, then your path is wrong or the file doesn't exist.
I see one major problem with the two examples above. How do we write content to either a hosted or local path? Presumably, we'll need different content for each map we want to produce. I'm going to ignore that problem for now, but we will circle around to it eventually.
The last method, building and displaying the HTML directly within the Web Viewer seems to offer a good solution. To display HTML within the Web Viewer directly, without any hosted or local references, you must use a data URI. An example of a data URI is the following:
data:text/html,<HTML><TITLE>Proof Group: Example Code</TITLE><BODY>This is a Proof Group Example Code document.</BODY></HTML>
The data URI has three parts. The data portion, which is always the same, essentially defines the protocol (in this case data, rather than http or file). The second part, 'text/html', defines the MIME type of the data and optionally the encoding. The third part of the data URI is the data itself, which follows the comma.
In most cases, the MIME type will be 'text/html', but it could be any type, such as 'image/png'.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC
Try copying both of those URIs and paste them into your browser's address bar. Pretty cool, right?
How does this apply to the Web Viewer? Well, if you calculate the data URI and display it in the Web Viewer, it will display the content just as though it was hosted or referenced locally.
I think you can see that it would be much easier to get FileMaker data (a person's address, for example) into the web page using the last technique than either of the first two. Imagine a Web Viewer with a web address calculated to the following:
"data:text/html," & Table::HTML_to_display
You could do a lot with that besides Google Mapping, I'd say.
The last thing I'll add is that the data URI technique only works reliably on PC with FileMaker Pro v9 and higher. On Mac, I believe it's always worked.
Well that's all the time we have for this week. Next week, I'll build upon this information to hopefully get a working example of a map in the Web Viewer. See you then.
Google Maps
Hi Mike have enjoyed your series on creating Google Maps using FileMaker. I've been working on integrating Google Maps with the FileMaker PHP API for some Custom Web Publishing projects recently and your articles have helped. If you're doing CWP with the PHP API there's an article on the Google Code site about using PHP with SQL which I was able to port to the FileMaker PHP API without too much effort so maps could be generated on the fly:
http://code.google.com/support/bin/answer.py?answer=65622&topic=11364
Andrew
Excellent link, thanks.
Andrew, that's an excellent link. Thanks for sharing.
Google Map PHP
Mike, This article was a tremendous help. Quick question. Is there a way to disable the info bubble and the address at the top. I linked to coordinates and my coordinate string is pretty long so it wastes a lot of real estate in my database. I'm not a PHP guru so as I sifted through your code and tried to make changes, I seemed to break the underlying structure.
Post new comment