Most developers are familiar with the built in Google mapping features within FileMaker Pro. However, with FileMaker Pro 13 bringing HTTP POST methods natively into the game, there’s much more we can do by leveraging the Google maps APIs in FileMaker. So what can we do with FIleMaker 13 Google maps?
In this article, we will look at using address information contained in a FileMaker record, sending a request to the Google maps API version 3 to retrieve the latitude and longitude coordinates for the address and setting those coordinates in the FileMaker record. Once we have gathered the location data, we can send another request to the Google Maps API to display an interactive single map interface into FileMaker based on the coordinates.
Why is this different than the built in FileMaker functionality? Because we have more flexibility with the API to display the map in just about any way we want to by harnessing the power of the Google maps version 3 APIs.
First things first…
The first piece of this puzzle is to have a Google account and sign-up for the Google API access. Visit code.google.com/apis/console for more information. Once you have the API access setup, you will need to enable API services and get a Simple API key. For this application, you will need to create a new server key.
Once you have created your API key, you will need to add your FileMaker server’s IP address to the “Allowed IPs” for the API key in Google API Console as well as your web server (if separate).
Next you will need to enable the API services that we need for this particular application.
And now the PHP
Now that we have that out of the way, the next piece is to create a PHP file to handle the javascript and request for the interactive map that we will display in a web viewer in FileMaker. I named mine ‘get_map.php’ and stored it on our FileMaker server’s website ( htdocs ) folder.
<?php
$googlemaps_api_key = $_REQUEST
[‘apiKey’];
$address = $_REQUEST[‘address’];
$lat = $_REQUEST[‘lat’];
$long = $_REQUEST[‘long’];
?>
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src=”https://maps.googleapis.com/maps/api/js?key=<?php echo $googlemaps_api_key; ?>&sensor=false”></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(<?php echo $lat ;?>, <?php echo $long ;?>)
};
map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
var markerTitle = ‘<?php echo $address; ?>’;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $lat ;?>, <?php echo $long ;?>),
map: map,
animation: google.maps.Animation.DROP,
//animation: google.maps.Animation.BOUNCE,
title: markerTitle
});
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>
Tie it all together in FileMaker
This next part gets us into FileMaker itself. First, we need to ensure that we have 3 fields for the geocode request. I have “address_lat”, “address_long” and an temp field to store the XML that we will retrieve from the Google API “zz_geocode_tmp”. The solution must also have a custom function installed called XMLParse which will traverse the XML Google gives us. Create a new custom function and name it “XMLParse”. Give it 3 parameters; “XML”, “Attribute” and “Instance”. Then add the following code to your custom function:
Let ( [
XML_Length = Length ( XML ) ;
Attribute_Length = Length ( Attribute ) ;
Get_Instance = If ( IsEmpty ( Instance ) ; 1 ; Instance )
];
Case( IsEmpty ( XML ) or IsEmpty ( attribute ) or PatternCount ( xml ; “<” & attribute & “>” ) = 0 ; “” ;
Middle ( XML ; Position ( XML ; “<” & attribute & “>” ; 1 ; Get_Instance ) + attribute_length + 2 ;
xml_length – ( xml_length – Position ( XML ; “</” & attribute & “>” ; 1 ; Get_Instance ) ) – ( Position ( XML ; “<” & attribute & “>” ; 1 ; Get_Instance ) + Attribute_Length + 2 ) )
) )
We then create a script which we trigger with a button in the solution to call the API, set the temp field with the XML result, retrieve the latitude and longitude from the XML (using our XMLParse custom function) and set the lat and long fields in the record. The web viewer will use that data to build the second request to the API for the custom map. Don’t forget to enter your API key into FileMaker either in a field or contained in the script itself and edit the URL of the map web viewer to the get_map.php file’s location on your web server.
Don’t worry, all of the code, scripts and custom functions mentioned in this article are included in the linked download files for your enjoyment. I hope you have fun with the Google APIs and they are not at all limited to what we’ve done here. There’s so much to it, you could literally spend days delving into the depth of control you have over the APIs. And if you’re like me and get a kick out of this stuff, you will be doing just that! I would love to see what others do with creating amazing FileMaker 13 Google Maps, the possibilities are almost endless.
