Late last year, I discussed how to get a Single Address map to work on a PC via the Google Map API. The problem was, it didn't work on Mac. I want to continue our FileMaker Google Mapping thread in this post by showing how we can get this to work on a Mac. Tip: get out your text editors. Also, do know that this method is fully cross-platform and relies on no per-workstation configuration (always a plus).
If you've read the article on why this didn't work on Mac, then you see the problem with the
<data:url> scheme that we used successfully on PC. We don't have control over our HOST and Google won't authorize the API for usage with a non-null host that we don't pre-register (e.g. proofgroup.com).The solution: use a server whose HOST we can control. Enter Apache from stage left. That's right, we're going to use a real server. I'll be using Apache, but this should work with any server that supports PHP (e.g. IIS).
Basic steps:
- Host something on Apache (at a known URL)
- Point to that URL in the Web Viewer
- View the resulting map in FileMaker
The question may be the second step: what URL? In this case, I'm using PHP and sending over the address to map as an attribute of the URL. Something like this (don't expect this URL to work):http://example.com/map.php?addr=1+Infinite+Loop,+Cupertino,+CA
What does 'map.php' look like?
The PHP looks a lot like the JavaScript that we used for the PC file, it's just wrapped inside a PHP script and hosted on a server:<?php
$googlemaps_api_key = "ABQ...K3g";
$address = $_GET['addr'];
?>
<html style="height:99%">
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=<?echo $googlemaps_api_key?>" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
address = "<?echo $address?>";
}
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 11);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="height:99%">
<div id="map_canvas" style="width:99%; height:99%"></div>
</body>
</html>
If you're familiar with PHP, you'll see that I grabbed the 'addr' attribute from the URL and echoed it to the correct place in the JavaScript. I've pulled out the googlemaps_api_key only as a convenience (remember, this will have to be registered at Google and match the domain where the file is hosted).
Once we have that hosted, it's as simple as pointing to a correctly-formatted URL to use it, like the following (and this one will work):
http://etc.proofgroup.com/maps/proof_blog/map_single.php?addr=1+Infinite...
To tie this into FileMaker, just enter the correct calculation in the Web Viewer. This will work cross platform, too, which is a bonus and requires no client configuration, another bonus:"http://etc.proofgroup.com/maps/proof_blog/map_single.php?addr=" & map::address
Of course, this is hosted at our site and is not guaranteed in any way. You may only use this service in a non-commercial way. However, if you want to host the file yourself, feel free. Just copy the PHP from above, swap out the api key for your own, and host on your own PHP-friendly server. Then, just modify the Web Viewer URL accordingly.
Download an example file showing how this works which points to our hosted example.
Let me know how that goes for you. See you next time.
UK postcodes
http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-...
This will give hints on how to make Mike's code work in the UK. If I get a chance I will merge the two together tonight and see where I get.
D
Great link
I'd recently come across the issue of Postcode licensing issues in the UK. Seems kindof weird, being a government agency (Royal Mail is, right?). While US Government works cannot be copyrighted, I suppose the USPS could, seeing as how they're only quasi-governmental. At this point it hasn't been an issue for us. Don't know how it works across the pond and why it's like that. Of course, I hadn't tested my PHP/JS with non-US addresses, but your post looks to help.
The basics remain: find JavaScript that works, host it, and use PHP to echo the address into the appropriate place in the script. Great find, Damian.
BTW Quite a noble task is occurring at Free the Postcode (http://www.freethepostcode.org/). Those of you with iPhones might want to take a look. I'd help if I could.
API Version 3
Looks like the google maps api v3 does away with the need for a key. This might make life a little easier?
Maps API link with FileMaker...
Hello,
I have just been following this string of posts and found this very helpful. I've been given the task of salvaging the following site, hosted by a 3rd party: http://www.geoblog.it/giorgio/terramadre/
I would like to develop the exact same format with a direct link to our exsisting FileMakerPro database, with a map window hosted on our own site using the API; this link would work outside of FileMakerPro too. I would like the same user interface; drop down menus, general layout, etc. I have explored the option of the Google Docs spreadsheet with JSON feed, but because of space limitations, this does not seem viable.
Look forward to your responses on how to make this happen. Feel free to contact me with more specific questions outside of the blog.
Thanks.
Thanks!
Hi Mike, thanks for this master class of google maps on filemaker, it have been very usefull to me!
I would like to point out a little visual improvement it could be done in the code you provided.
I just removed the "style="height:99%" and edited the css style like that:
< div id="map_canvas" style="width:100%; height:100%">< / div >(take out the spaces in the div tag)
The result is a nice fullscreen window google maps.
Thanks again!
Post new comment