Log in
Hot & Trending on FMT

FileMaker Google Maps API Geocode

Featured FileMaker Google Maps API Geocode

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).

SCG_GoogleMaps_API

 

Next you will need to enable the API services that we need for this particular application.

SCG_Google_API_Services

 

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.

FileMaker 13 google API geocode

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.

Demo Files: SCG_GoogleMaps

Thanks for reading,
-Aaron

Want this implemented into your solution - Tap - Click here

The Scarpetta Group

The Scarpetta Group, Inc. is a Platinum FileMaker Business Alliance Member, specializing in custom FileMaker solutions for desktop, iOS and web. Our expertise is understanding our clients’ needs and translating their requirements into successful software solutions that enhance their business, improve efficiency and streamline workflows. We accomplish this through years of project management, diverse skill sets and industry experience.

Whereas many development firms handle only FileMaker development, we leverage our web development strengths and vast knowledge of bringing FileMaker to the web to set us apart. With more than 15 years of experience, The Scarpetta Group has completed countless projects for small businesses to international Fortune 500 companies. These projects have ranged from single iPad applications using FileMaker Go to 100+ user management systems, CRMs, Content Management Systems, Custom PHP APIs and complex web applications.

In the last five years, The Scarpetta Group has grown from a single employee and a team of subcontractors to five full time developers and a team of subcontractors. In 2013 The Scarpetta Group began hosting a FileMaker Pro User Group that has proven to be very successful and considered to be one of the larger user groups in the Southeast.

No matter what data challenges your company faces, The Scarpetta Group has the expertise to lead you in the right direction with your data management and get your company on the road to efficiency. Contact us today.

Website: scarpettagroup.com