The Issue...
Dropping a marker when the map loads is generally not difficult if you know a little JavaScript and can understand the great documentation Google provides for this API. But in doing so, with the way we had things set up, every time we clicked on the map to select coordinates, we encountered the map reloading and centering on the place just clicked. This was not a good user experience.
So, we opted to handle this in a FileMaker way, which resulted in some changes/additions to the schema, scripting and web viewer.
How To Use The Demo
We've implemented a second layout, which we default to when opening the file. The original layout is accessible either via the usual layout menus or by clicking the blue button on the right above the map.
You can click around the map and the latitude and longitude fields will populate as before.
Once the marker is in the correct location, click the blue button to 'Use The Captured Coordinates'. This sets a couple new fields with the values selected.
Now, if you close the file and reopen it (or go into layout mode and back to browse mode), this forces the map to reload. The marker will drop at the selected coordinates and the map will be centered on the marker.
So, What's Changed?
Here's a quick rundown on what's different from the last demo:
- We added a couple hidden divs at the end of the code that hold our latitude and longitude values.
- The web viewer needs adjusting to do a similar substitution as we did previously with the Start Address field.
- At the beginning of our Initialize function we grab the coordinates into variables for use in our code.
- If coordinates exist in these variables, then when we load the map we use these. If not then we use the Start Address as before.
- There are two new visible fields - SelectedLatitude and SelectedLongitude. These store the desired coordinates once they have been found on the map and the button is clicked.
- There are two non visible fields - MapLoadLatitude and MapLoadLongitude. When the record is loaded, a script trigger runs that populates these fields with the values in the Selected fields. This is critical - if the fields being sent to the HTML are the same as the ones being used when the map is clicked, or the Selected fields, the map will refresh and center on that location.
There may be other ways to tackle this issue but we wanted to keep it simple and in the FileMaker world that many readers will be more familiar with than JavaScript. Also, the Selected fields may be one step too many, depending on how you intend to deploy this in your solution. It would be possible to just use the Lat/Lng fields in conjunction with the script trigger and MapLoad fields, but we wanted to bolt on to the previous demo and show options. Similarly, the HTML/JavaScript code could probably be streamlined but again we wanted to keep the original code as intact as possible so the differences can be explored.
The Demo File
You can download the revised demo file here.
Don't forget that you'll need to place the HTML in a global field or as a layout text object, and of course adjust all references to suit your solution.
Do go check out the Google Maps API documentation - click the Google Maps icon in the demo file to go directly to their site. There's so many possibilities and options that can add much value and functionality to your FileMaker solution.
