08
September
2015

Capturing Map Coordinates Into FileMaker

Using Google Maps Javascript API v3

Capturing Map Coordinates Into FileMaker

Google has a variety of APIs for its Maps, allowing developers to access, integrate and query map data. Some time back, a client needed the ability to click on a map and capture the selected coordinates into their database, so we started our map quest using the Google Maps Javascript API v3. Since then we've had a number of enquiries as to how this was accomplished and, as a result, we've put together a demo file.

What is an API?


If you really want to dig into the answer to this question, head over to Wikipedia and knock yourself out! For our purposes, the following definition will suffice:

An application programming interface (API) is a particular set of rules ('code') and specifications that software programs can follow to communicate with each other. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers.

So, from within FileMaker we're going to communicate with Google Maps through the API. Now that's taken care of...

What is Javascript?


Again according to the mighty Wikipedia:

JavaScript is a high level, dynamic, untyped, and interpreted programming language. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins.

Awesome. Since it's supported by all browsers, our web viewer object in FileMaker can be used with Javascript. It's a powerful programming language but we're not here to delve into this side of things. There are plenty of resources available if you wish to get more familiar with Javascript.

Integration Concepts


The basic concepts of what we will be doing are:

  • Place a web viewer on a layout.
  • Get this web viewer to display a Google Map using the API Javascript code. There are a variety of ways to do this, including adding the code directly into the web viewer or placing the code in a text object and referencing that. For our demo we have the code in a text field and we reference that in the web viewer so it's easy to look at and adjust as needed.
  • The Javascript code waits for a click, and when one is detected, it clears any previous map markers that may be present and drops a new marker in the clicked location.
  • Immediately after this, we call a FileMaker script in our database using the FMP URL protocol, passing parameters which set variables with the latitude and longitude. Then in our script, we use the values in these variables to set the latitude and longitude fields.
  • As a bonus feature, we also have a starting address field, which is used when the map is first loaded to center the map on this location. The address is geocoded (converted to latitude and longitude) and then these coordinates become the center of the map.

Integration


If you wish to integrate capturing coordinates into your FileMaker solution, what do you need to be aware of?

Google Maps Javascript API Resources - you can check out the resources for the API here. There are code samples and suggested uses that you may not even be aware exist. Lots of cool stuff.

API Key - this demo does not have an API key, but it is suggested and recommended that you get one of these from Google. It is free to get one and the use of the API is free within limits. Be sure to familiarize yourself with the usage guidelines before implementing and sending any solution live.

Fields - the FileMaker Latitude and Longitude fields are referenced in the script that sets the coordinates into the fields. The HTML andStart Address fields are referenced in the web viewer.

Script - the SetCoordinates script is referenced in the Javascript code located in the text field on the HTML tab.

Filename - the name of the FileMaker file is also referenced in the Javascript code.

There are plenty of comments in the code on the HTML tab to assist porting this over to your own solution.

Compatibility


This demo should be compatible with FileMaker Pro 13 or 14 and FileMaker Go 13 or 14. It is recommended that you have the latest updates installed for the applications.

A note of caution regarding FileMaker Go: A known bug exists where FileMaker Go may not execute the script when the call from the web viewer is made. This is related to the '$' and '~' characters that may be in the FMP URL in the Javascript code. The workaround as noted in the code is to replace '$' with '%24' and replace '~' with '%7e' (don't include the quotes).

The FMP URL protocol is not supported in WebDirect, and therefore this demo will not work in WebDirect.

Update 2015-09-09: As noted in HomeBase Software's post on the same subject, this demo will not work when deployed as a runtime solution as the FMP URL protocol is configured when FileMaker Pro is installed. There might be a way to dig into the OS and set up the protocol manually, but we have not attempted this and it falls outside of the scope of this article.

Finally, the demo file...


You can download the demo file here.

While this demo is not compatible with WebDirect, we have implemented grabbing coordinates into FileMaker from a web viewer located on a WebDirect layout. It's a lot more involved but we'll look at doing a blog post on this technique in the near future.

Have fun with the demo and implementing the technique in your own solution. If you need help, don't hesitate to get in touch.

Finally, huge thanks and gratitude go out to Julio Plasencia for his assistance and introducing us to the FileMaker/Javascript world when we first started down this road. As with many in the FileMaker community, his willingness to help and share has been unreal and greatly appreciated, making it a community well worth being a part of. 

Update 2015-09-14


Check out our second post on this subject, which modifies the demo file to have a marker drop when the record loads if previously selected coordinates exist.

  • Tags: FileMaker

Categories: The FMP Files

Comments (7)

    • Duncan Baker

      09 September 2015 at 06:57 |
      Thanks Doug, hadn't seen that. I see you had an issue with iOS and the keyboard popping up. Our demo doesn't have that problem - not sure what the differences are, but check it out to see if it can be resolved in yours.

      reply

  • Russell Turner

    10 September 2015 at 11:53 |
    Duncan, thanks again for posting this. I had some issues implementing it on my solution but I've found the issue and thought it would be worth posting for other users. If like me you copied across the web viewer to a solution make sure you delete the "/*" and "*/" from the beginning and end of the address in the web viewer.

    reply

    • Duncan Baker

      10 September 2015 at 12:04 |
      Hey Russell. Yeah absolutely you would need to do that. In fact, unless you have tables and fields named exactly as in the demo file, you will need to adjust what the web viewer points to - change the HTML and Start Address field references to match the fields in your solution. Glad you got it worked out!

      reply

  • Russell Turner

    11 September 2015 at 09:45 |
    Hi Duncan. I had one question on this. If the database is closed and re-opened, or for example the layout is edited, any pins that have been placed disappear, although of course the co-ordinates are still stored. In your experience, do you think it would be possible to edit the code so that the pins remain (or indeed automatically drop the pin if there are already long/lat coordinates stored for the the record. I'm completely new to Javascript, GoogleMaps API and whilst I'm willing to try and learn both, knowing whether it's feasible or any pointers you may have would be greatly appreciated.

    Otherwise, as a work around I might try having two web viewers showing maps . The first will display your solution above if there are no coordinates already for the record. Once the pin has been dropped and these have been set, the second web viewer will be displayed in its place, displaying a map with the pinned location (based on other code I already have implemented elsewhere).

    Ideally of course, doing this within one web viewer would be preferable.

    Many thanks in advance.

    Russell

    reply

  • William Miller

    03 December 2015 at 11:24 |
    Nice post Doug!
    I'm using it already. But as you indicated, there are some issues with iOS. Even with the replacements for $, it is not capturing the Lat and Long, although the pin drop is working.
    ~ William

    reply

Leave a comment

You are commenting as guest. Optional login below.

Client Testimonials

  • Sounds Essential is a trusted partner on several demanding and highly complex development projects. Their technical skills, creativity, and most importantly, their grasp of our business needs has helped our company deliver sophisticated solutions to our (very happy) clients. Even when projects reach the "intense" stage, we really enjoy working with Sounds Essential.

    Pam Henry, Managing Partner
    Digital Spark LLC
  • Sounds Essential worked with our staff last year to create the first digital plant database in our organization’s history. This milestone not only benefits the day to day work flow of our organization, it creates the opportunity for us to share our data with others worldwide. Due to our niche high elevation ecosystems, we can share valuable insight about native plant communities and how they are adapting to climate change. Without the help from SE and funding from Stanley Smith Horticultural Trust this project would still be in conception. Working with SE made the development and implementation a pleasure for us gardeners.

    Kelly Holdbrooks, Exec. Director
    Southern Highlands Reserve
  • Sounds Essential is the best! Our company website and database are essential parts of our business. The website and database give us the professional look of who we are while also making our work flow so much easier! We highly recommend Sounds Essential.

    Charles Dwan, Owner
    Chefs Trading
  • Sounds Essential's team is the perfect combination of creativity, aesthetic vision, and technical expertise which enables them to provide innovative products. They are always responsive with questions, issues, and technical support and as the technology changes they adapt accordingly. We highly recommend Sounds Essential and they are indeed ‘essential’ to our business model.

    Wesley Wofford, Owner
    Wofford Sculpture Studio
  • Sounds Essential was a pleasure to work with from start to finish. With their guidance, we were able to update our website quickly and present a more polished and modern interface for our church. The documentation provided was clear and easy to follow, and they have been quick to respond to any questions.

    Kirsten Huscusson, Parish Administrator
    Church of the Incarnation
  • Between their exceptional level of service and versatility of skill, Sounds Essential is my first stop for anything from IT to creative... and they're my favorite partner, hands down.

    Leah G. Fallon, Owner
    Eleven Eleven Creative

Get the Latest

We occasionally send out news of general interest in our fields of specialty. If you'd like to stay up to date, please sign up according to your interests below.
Please wait