February 17, 2012 
2014-12-17 Update: The FileMaker Pro 11 demo works well on Macintosh, but there are some issues with Internet Explorer on Windows. If at all possible, it is recommended that you use FileMaker Pro 12 or 13 on Windows. Here is a link to the FileMaker Pro 12 Demo.
2014-01-25 Update: Working with the demo file in FileMaker Pro 11, I noticed the output JSON files were not properly formed, so I added a number of error correction steps to the Generate JSON and HTML script. Checking for missing Longitude and Latitude, cleaning out quotation marks, carriage returns etc from the addresses. Changed demo name to V3.4.
2013-06-12 Update: Thanks to reader Jeff Yurka and a bit of debugging, I discovered that although the map was loading points it was not clustering the points. It turns out that I had neglected to update the Global setting field for the URL Markercluster Javascript to:
That is fixed and Cluster Maps are back in business.
The Get Coordinates scripts were updated as well. The URL to get the coordinates had changed but now seems to work with and without an API key. Note that you only have to run this script once when add new addresses to your data.
The Global field “Include Javascript” option for ‘Include’ does not currently work. Use the Reference External Link option for now.
2013-05-29 Update: FIXED DEMO! Kinda, possibly, maybe. Not knowing much Javascript and being mystified about how Google’s new API scheme works, I pasted the new markercluster.js into the global field and updated my API key and it all seemed to work. Mysteriously, even without an API key it seems to load cluster maps, which makes me think there may be more to it. Please test and inform me of any issues. I have updated the demo file name to ClusterMapsV3.fp7.
2013-05-23 Update: One nice looking alternative to this free, but not currently working demo is GoMaps from Seedcode. Pricing starts at $299.
2013-03-22 Update: It has been pointed out by reader Roberto Galzignato that the demo file is no longer functional. Google has moved to a version 3 of their API deprecating v2.
Fortunately it looks like the MarketCluster js has been updated to deal with v3 of the Google API. To get the demo working, you will probably have to update your code with his changes. I don’t have time to look at this right now, but if anyone is successful, I would appreciate any feedback on how you got it working.
https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/FC299mqUoTM
The MarketCluster developer says:
I’ve just checked in the first version of the Google Maps v3
MarkerClusterer to the utility library:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/I’ve tried to keep the interface the same as the v2 library so the
transition to v3 should hopefully be fairly simple.If you’re interested, have a read of the reference doc:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.htmlCheck out some examples here:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html.2012-09-17 Updated Demo file. Another reader from Australia had problems with the Get Coordinates script. It seems that in addition to the drains swirling in reverse down there, FileMaker Pro behaves slightly differently. FM Pro was returning extra HTML into the Longitude/Latitude fields, breaking the map display. A Filter function (0123456789-.) was added on those Set Field steps to eliminate that issue.
Also, if you have a situation where the map loads, but the map appears blank, this may be because it is centring in the middle of an ocean — try swapping the Settings ‘Centre Map on Longitude/Latitude’ fields.
If when you load the map in a browser, you see an error to the effect: “Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key” — You can usually resolve this by obtaining a new or updating an existing Google Map API Key in the Settings area.
2012-04-20 Updated Demo file. A reader from Brazil pointed out a couple of issues that may come up. First if there are commas in the addresses, you may have problem getting the Longitude and Latitude coordinates. I put in a ‘Substitute’ function around the main address fields before sending the request to the Web Viewer. If you are having any issues in getting coordinates, try reviewing your addresses for unusual characters and try substituting them out.
Also, she was having an issue with unusual numbers being returned to the Longitude and Latitude field. These bad coordinates were breaking the map display. For some reason instead of being within the range of +/-100 with decimal points, she was having numbers returned with a thousands separator. I wondered if this had something to do with using the current system settings, so I changed the file to use the saved file settings. This seemed to resolve the issue. I have updated the demo file accordingly. Thanks for pointing this out Luisa.
I’ve talked about mapping with FileMaker before on this blog. In the past, I have attempted to generate maps from FileMaker to Google’s Mapping API with limited success. I found that as the number of data points goes up the simple approach described in Google’s Mapping API starts to break down. Another problem is that if your data points are geographically diverse, they sometimes display poorly.
The technique described here could be useful for organizations who want to get a geographical overview of where their customers are coming from: the maps generated can be employed in location planning and marketing campaigns etc. Note that according to Google’s usage policies, whatever map you produce should be accessable on the public web. Maps created for internal usage may be subject to the Google Maps API for Business, which according to their web site is “extremely cost-effective, starting at just $10,000 per year”...hmmm. doesn’t sound very cost-effective to me, but perhaps I am not their target market.
I was recently introduced to a new approach to mapping that scales well to larger numbers of data points by my son, Cory Alder. He came across a Javascript library called marketclusterer.js designed (by author Xiaoxi Wu) to display clusters of records. Cory’s main interest is in Objective C development and specifically iPhone app development, (he created the awesome CatPaint app, – the premier cat-based image editor) but occasionally he helps me out with more complex programming tasks. Delving into Javascript is one of those areas I don’t usually go, so getting access to this technique was great. I made the scripts more generic and built a demo file so the solution could be fairly flexible for users.
Sample Cluster Map generated with Google’s Mapping API
As you click on the map and zoom in, (either by using the magnifying glass icons to the left of the screen, or by clicking on an area of the map) the coloured clusters break down into smaller groupings, until finally you can see individual markers representing a data point.
In the demo file, you can display maps either in a web browser or within FileMaker in a Web Viewer (shown above).
Import Records
There is a basic Import routine to import a data set. Either Import your data or enter some data by hand.
Setting up for an Export – the global fields
Before you can get started, you will need to fill in some basic information for the file.
- Give the Map a Title
- Fill in a file name. Be sure to use ‘.htm’ or ‘.html’ as a file extension.
- Select from the popup where you want the file to land. (Desktop, Documents, Temp etc)
- Set whether you want the javascript file to be embedded in your HTML or externally referenced.
- Obtain a Google Maps API key
- Center the Map’s coordinates
- Set the Zoom Level that the Map will open on (a lower number is zoomed out farther, a larger number is zoomed in farther
- Set the Width and Height of the Map you will be generating
Setting up for an Export – Get All Coordinates
If you don’t already have Longitude and Latitude information for your records, you should import address information and then run the ‘Get All Coordinates’ button. This will loop through all the records in a found set and pull down the coordinates from Google’s Mapping API.
Note: Before running the ‘Get All Coordinates’ button, be sure to obtain a Google Maps API Key. There is a link to this on the Settings page.
Wait, wait, wait some more.
Once the Coordinates are in place, you are ready to map
Click the ‘Generate HTML File and Display Map’ button and select whether you wish to view the map within FileMaker, or in a Web Browser. The script will take a little while to process as it moves through each record and generates a JSON entry for each address. This is fed into an HTML page to display the data on the map.
The Cluster map in a web browser
The result is a map, named based on the settings you entered. The zoom level and map centering is also determined by the global fields on the Settings layout.
Zoom in a few levels and note that the clusters break up revealing the actual data points.
The closer you get in zoom level, the less clusters there are and the more data points are revealed.
Clicking on the data marker will reveal a label and any info you have included from the database.
Behind the scenes
Most of the scripts in this file are not that complicated. The challenging code is the ‘Generate JSON, HTML and Display Map’ script. The only other code of note is the ‘Get Coordinates for this Address’ script.
The Script that generates the map
Generate Map: Generate JSON, HTML and Display Map
Show Custom Dialog [ Title: “View in a Browser or in FileMaker”; Message: “Would you like to view this data in a web browser or within FileMaker’s Web Viewer?”; Buttons: “Browser”, “FileMaker”, “Cancel” ]
Perform Script [ “Check for ‘.htm’ in File Name” ]
If [ Get(LastMessageChoice)=3 ]
#’Cancel’ selected.
Halt Script
End If
Go to Layout [ “Data Entry View” (Data) ] #set up the $json header.
Set Variable [ $json; Value:”var data =[” ]
Go to Record/Request/Page [ First ]
Loop
#Make sure the longitude and latitude are numbers in the appropriate range.
If [ Data::Longitude <180 and Data::Latitude <90 //I switched this to test for less than 180 for longitude (360 around the world, split in half E/W -/+) and less than 90 for Latitude]
#Put any additional information (aside from the label field) in here that you want displayed on the data point.
Set Variable [ $info; Value:Data::Address_Street& “, “&Data::Address_City& ” “&Data::Address_Prov|State& ” “&Data:: Address_Zip|PostalCode& ” “&Data::Address_Country ]
#create JSON record with longitude, latitude, label and info
Set Variable [ $json; Value:$json & “{ ” & “‘longitude’: ” & Data::Longitude & “, ‘latitude’: ” & Data::Latitude & “, ‘label’: \””& Data::Address_Label & “\”, ‘info’: \””& $info & “\”},” ]
Set Variable [ $locCount; Value:$locCount+1 ] End If
Go to Record/Request/Page [ Next; Exit after last ]
End Loop
If [ $locCount≤0 ]
Show Custom Dialog [ Title: “Oops!”; Message: “no records found.”; Buttons: “OK” ]
Else
Set Variable [ $json; Value:Left($json; Length($json)-1) & “];” ]
Set Field [ Settings::g_tmp; [A mess of hot gooey HTML and Javascript. See demo file for details.]
Set Variable [ $FileName; Value:Settings::gFile_Name ]
Set Variable [ $Path; Value:Case( Settings::gSave_File_Location=”Desktop Path”; Get(DesktopPath); Settings::gSave_File_Location=”Temporary Path”; Get(TemporaryPath); Settings::gSave_File_Location=”Same Directory as Database File”; “”; Settings::gSave_File_Location=”FileMaker Folder”; Get ( FileMakerPath ); Settings::gSave_File_Location=”Documents Folder”; Get ( DocumentsPath ) )]
Set Variable [ $tmpPath; Value:$Path&$FileName ]
#The New Window routine allows us to isolate a single record for export routine AND maintain the Found Set.
New Window [ Name: “Export” ]
Show All Records
Omit Record
Show Omitted Only
If [ Get(LastMessageChoice)=1 ]
#Open in a Browser selected.
Export Records [ File Name: “$tmpPath”; Automatically open; Character Set: “Unicode (UTF-8)”; Field Order: Settings:: g_tmp ] [ No dialog ]
Close Window [ Name: “Export”; Current file ]
Else If [ Get(LastMessageChoice)=2 ]
#View in FileMaker Web Viewer selected.
Export Records [ File Name: “$tmpPath”; Character Set: “Unicode (UTF-8)”; Field Order: Settings::g_tmp ] [ No dialog ]
#Exporting a single record allows you to select UTF-8 output which turns out to be crucial to the Javascript interpreting the file correctly.
Close Window [ Name: “Export”; Current file ]
Go to Layout [ “Map View” (Settings) ]
Adjust Window [ Resize to Fit ]
#FileMaker’s path routine for a Web Viewer is a little different than the web browsers. It can’t handle spaces and needs the ‘file:///’ prefix.
Set Variable [ $localPath; Value:”file:/” & Substitute($tmpPath ; ” ” ; “%20” ) ] Set Field [ Settings::gRequested_URL; $localPath ]
Set Web Viewer [ Object Name: “GoogleMapView”; URL: $localPath ]
End If
End If
Script for getting the Coordinates from Google’s Mapping API
This script employs a fairly standard Web Viewer routine.
- Send out a calculated URL request to a named Web Viewer in FileMaker.
- The request goes to Google’s Mapping API (based on the address fields).
- A loop causes the script to wait until some data returns in the Web Viewer from Google’s server.
- The returned data gets parsed the result into fields.
Go to Layout [ “Data Entry View” (Data) ]
#Send a calculated URL to a named web viewer. The request goes out to Google’s Mapping API and returns coordinates.
Set Web Viewer [ Object Name: “GPSWebService”; URL: “http://maps.google.com/maps/geo?q=” & Data::Address_Street & “,” & Data::Address_City& “,” & Data::Address_Prov|State& “,” & Data::Address_Country& “,” & Data::Address_Zip|PostalCode & “&output=csv&key=” & Settings::gGoogle_API_Key ]
Loop
Pause/Resume Script [ Duration (seconds): .1 ]
Set Variable [ $Response_From_Google; Value:GetLayoutObjectAttribute(“GPSWebService”; “content”) ] #Wait for a response from Google, exit the loop once there is data in the local variable.
Exit Loop If [ not IsEmpty($Response_From_Google) ]
End Loop
#Parse the result from Google into the appropriate Longitude, Latitude, Precision and Error fields.
Set Field [ Data::Latitude; Middle ( $Response_From_Google ; Position($Response_From_Google;”,”;0;2) + 1; (Position ($Response_From_Google;”,”;0;3) – Position($Response_From_Google;”,”;0;2))-1) ]
Set Field [ Data::Longitude; Right ($Response_From_Google; (Length ( $Response_From_Google) – Position ($Response_From_Google;”,”;0;3))) ]
Set Field [ Data::GPS_Precision; Middle ( $Response_From_Google ; Position($Response_From_Google;”,”;0;1) + 1; (Position ($Response_From_Google;”,”;0;2) – Position($Response_From_Google;”,”;0;1))-1) ]
Set Field [ Data::GPS_HTML_Error; Left ($Response_From_Google; Position($Response_From_Google;”,”;0;1)-1) ]
The matching batch script simply loops through all the records and performs this script.
Troubleshooting
The text generated for the HTML file you are creating has the potential to generate errors, resulting in a blank map showing up. Here are a few places to look at if your HTML page is not loading the map correctly.
- Review your address data before running the ‘Get Coordinates’ script. – clean up bad postal codes, street addresses etc.
- Be on the look out for both single and double quotes in your text. If these get into the HTML file (via the $json variable) they will cause trouble with the interpretation by the Javascript.
- Review your Longitude and Latitude numbers before exporting the HTML file. Try sorting by Longitude and Latitude. Alphabetical or blank records will end up on top. Remove anything that is not a number.
- Make sure your exports from FileMaker are set to Unicode (UTF-8).
- Review your longitude and latitude numbers to make sure you got the correct number going into the correct field. I didn’t do this and ended up with a number of entries out in the Atlantic Ocean.
- If you are embedding your own marketclusterer.js file in the HTML file, watch for comments that start with ‘//’ and end with a carriage return. These lines will cause problems, running the ‘minify’ routine minimizes this issue. Another approach is to remove these double slash type of comments and replace them with starting comment ‘*/’ and ending comment ‘/*’
- Review your HTML file export. Look for errors in the JSON portion. If you are running Safari, turn on the Developer menu and select Show Error Console. Look for any obvious errors displayed.
Conclusion
Once you have generated the HTML file, you can email that file to your client or host it on a website. They don’t need to have FileMaker running, or any PHP code to help render the file because it is a static HTML file. You can circulate the HTML file to anyone with a modern web browser including iPhones and iPads.
Watch out for your file size. As the number of records grows, the HTML file takes longer to generate and grows larger accordingly. My demo file has about 2,000 records. I tested the output with 5,000 records and although it takes a while to generate the longitude and latitude, rendering the actual file in a web browser was fairly quick.
Google’s Mapping API is a moving target. They recently moved from v2 to v3. We started this project employing v2 of marketclusterer.js which did not have built in support to display additional data on the final zoom level data points. V3 of the library added that feature, so we made the switch in libraries. The demo file contains the latest version of the Javascript.
That’s it. I hope you find this FileMaker/Google Maps/Cluster Mapping demo useful.
Sidebar: Google Maps API Key
To use the GPS coordinates function and display the maps, you need an API Key from Google. Generating a cluster map and then viewing it ‘internally’, ie just within your company, may consititute an issue with the Google Maps API license. On the API Services overview, Google suggests a “Courtesy limit” of 25,000 queries/day. I am not sure if you stay below the Courtesy limit, is your internal use is considered OK, or if all internal use is a no-no. Why have a Courtesy limit? Anyway, the issue seems to be solved by publishing the cluster map on the open web. If this is not appropriate for your situation, you should probably have the conversation with Google about licensing.
Here is some more words Google says about their Map API:
About Google Maps API
The Maps API is a free service, available for any web site that is free to consumers. Please see the terms of service for more information. Businesses that charge fees for access, track assets or build internal applications must use Google Maps API for Business, which provides enhanced features, technical support and a service-level agreement.
5.2 Account Keys. For certain versions or features of the Maps API(s), Google may require you to obtain and use an alphanumeric key or cryptographic key that is uniquely associated with your Google Account and the URL of your Maps API Implementation. You must obtain and use such key (if required by Google for the applicable version or feature of the Maps API(s)) in accordance with these Terms and the Maps APIs Documentation.
Do I need to use Google Maps API for Business?
There are certain situations that require the use of Google Maps API for Business. If you’re using the Maps API internally or for asset tracking purposes, you must have a Premier license. Additionally, if you are charging a fee for access to your Maps solution, whether for a business or consumer audience, you are required to purchase the Maps API Premier. All three of these use cases are prohibited by the standard Google Maps API terms of service.
What is the cost of Google Maps API for Business?
Google Maps API for Business is extremely cost-effective, starting at just $10,000 per year. Pricing is based on the number of map page views for externally facing websites. For internal uses, it is based on page views or number of vehicles being tracked. Please contact us for more information.
Related Articles:
Simple Static Map Overlays in FileMaker Pro
Where Am I? Using FileMaker Go 12 to track your Location
FileMaker and Image Maps in a Web Viewer
Cluster Maps – Update – Fixed Popup Formatting Bug
HomeBase Software 
A lot of FileMaker developers talk about using Google for maps, geocoding or directions on the desktop and just ignore Google’s usage policies. What is true is that 90% of what FileMaker-ites want to do with the Google API is expressly forbidden by the EULA. Especially if you are then setting up a customer with that solution, you are in violation.
Just sayin’.
Hi Jonathan,
While I can see your point may be true, I still have questions.
I can see why FileMaker developers might be confused by it all. (“Damn it Jim, I am a developer, not a lawyer!”) It starts off with FileMaker building in a Google maps query into the Web Viewer. That first instance of a private use of the Google Maps might be the gateway drug to all this. Could it be that FileMaker Inc. is actually paying the $10K fee and we are all covered for private use thereafter? Not likely, but it would be cool.
What about if the map truly is generated for a public web site? What constitutes a public web site? Does putting a page up on a public web server with no inbound links (except via an internally distributed email) qualify?
Is there a quantitative difference in the minds of Google’s legal department between generating a 2,000 point cluster map from a six point route map?
What do you think of Google’s two-tier pricing model: 1) free or 2) $10,000 a year? Could it be that Google might be more successful at licensing with some more nuanced tiers? How about a pay-per-data-point approach, along the lines of their pay-per-click ad rates, with some discounts for higher volume users? Bringing the price down and making compliance easy seems to have done wonders for the music industry.
What do you think Google intends with their 25,000 Courtesy limit? Is that for users who qualify under the free terms or users employing the API privately but not ready for the 10k license? What happens when you exceed the limit?
Have you heard of anyone being pursued by Google for violations? What does enforcement look like? Is there a takedown notice period or do they go straight to a lawsuit? How would a straight-to-lawsuit approach jive with their ‘Don’t be Evil’ philosophy?
Just sayin’.
First off, their “don’t be evil” thing obviously went away a long time ago, so that doesn’t even apply anymore.
Still, the chances of actually getting caught at this is pretty slim. I don’t think they care that much. That said, if they ever did decide to care then everyone who took advantage of Google’s lax attitude would be in trouble.
I lost a job one time when the client asked for a guarantee that they couldn’t get in trouble, because THEY went in and read the agreement. Incidentally, Yahoo and Bing maps’ APIs have similar strictures. The only way to get good map data legally is to pay for it. Google has priced themselves out of reach for everyone I can think of. But even that make sense if you think of what their core business is. They are looking for the publicly-available mapping service that can generate traffic for Google ads.
There are two other sources out there. Business-oriented map data services that have very good, human-vetted data and the free services with unreliable data.
All the quality mapping data sources are still impractical for anything less than several hundred queries a month. They are designed for corporate mapping needs, not the handful of lookups required for a small service business.
The free ones get their data from publicly available federal databases that are hard to program with and are ridiculously inaccurate.
It’s a tough situation that leaves the small guy out in the cold. I’d love to hear if there’s a better way; something that doesn’t cost an arm and a leg for limited use. AND, of course, has an accessible API.
So I have settled for sticking to the public Google maps with a bit of URL assist, until the time when a better solution arises.
Oh, and just try getting ahold of someone at Google for clarification. That alone is evil enough for me. ::-(
Have you had a look at http://openlayers.org/ yet?
Haven’t seen that before. That looks like a great solution, if you’re a “real” programmer. I’m just a Filemaker guy. Give me a web service and I can do a lot. Make me play with JavaScript and my productivity takes a nose-dive.
OpenLayers is not as “web-servicy” as the solutions I have looked at, and I can’t find distance calculation or directions in the documentation, which are the two most requested by my clients.
Good to know about, though. Just in case. Thanks!
Someone also mentioned this one: http://www.openstreetmap.org/
Apparently it is designed to be downloadable, so you can store it locally…
Also just saw this:
MapQuest releases Native Mobile Mapping APIs
MapQuest API Terms of Use
Although this might not be exactly what you are looking for, you can’t go wrong with Kevin Frank. http://www.filemakerhacks.com/?p=3802
Agreed. Part II of this blog post was even cooler. A link was embedded in my reference to a ‘six point route map’. http://www.filemakerhacks.com/?p=3891
Is this compatible with Filemaker pro 11 server? the map cannot be displayed.
I did not test it on Server, but as long as you have your own Google API Key, in theory it should work as most of the action is happening on the client side.
Yes, it works on server. Is it possible to customize the colour of the clusters to suit our needs? Is it also possible to display the markers in relation to time (as the number of markers increase with time, we would like to see more markers displayed when we select July compared to June)?
Thank you for this powerful cluster mapping demo
Thanks for testing it on FM Server. Glad to hear that it works.
The documentation for the Google Map Javascript is here: http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclustererplus/src/markerclusterer.js?spec=svn360&r=360
If I am reading it right, not being much of a Javascript coder, the code lists a number of CSS properties that can be altered, which affect the font, size and colour of the icons. The icons they use are here:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/
Presumably you could edit the path to some icons of your own choosing.
Obviously, if you are going to alter the Javascript, you will not be using the linked file from the Google library, but storing your own edited Javascript file (and icons), either internally in FileMaker, or on your own web server.
The number of items in a cluster is a bit of voodoo that I don’t understand. It appears to be fairly dynamic, using its own internal logic to determine the number of items displayed at any particular level. If you have a Javascript coder handy, ask them.
One item you might try changing is ‘this.gridSize_ = opt_options.gridSize || 60;’ to see how that impacts things. At the end of the code is an item called IMAGE_SIZES, which may also have an impact.
If it works, then I could imagine a system that altered that gridSize or IMAGE_SIZES dynamically depending on the time frame and output different Javascript files for different requirements.
Hope this helps.
I am using your scripts to generate great cluster maps of our data, but I am not sure about something. Some of my data points have multiple hits on teh exact same address. Even when I zoom completely in to the bottom level, the cluster obviously still stays. What variable or settign can I change in the script to break the markers apart a a higher level?
Thanks,
Gary
Good question. It is going to be in the Javascript, which is a bit of a mystery to me as well. It is in the script called “markerclusterer.js”, either stored locally or referenced on Google’s server. To edit it, you will have to host your own version.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js
There is a variable called minimumClusterSize.
Thanks! Ihad no idea where it was. I was thinking it might be the MaxZoom variable, which by default is all the way in. If I could set it up a level or two it might show them individually and pop them apart as they would without clustering. I still want them to cluster in small groups.
Remember if you are going to store the modified javascript internally, to go to the Settings tab and change the ‘Include Javascript’ to ‘Include’. Then paste the modified Javascript in the Marketcluster Javascript field.
Got it to work! Thanks. Now it, stacks the multiple markers on top, only showing the last one. Any thoughts on a GOOD solution to showing multiple markers at the same exact location? I’ve searched far and wide. Wuld love to find an addition or modification to this script to explode multiple markers liek Google Earth does when zoomed out. Would even used a tabbed version or something. Thanks!
Hi Gary! I am having the same problem as you. If you have any solution for multiple hits on the same address, could you please post it here fore me? I have absolutely no knowledge of Javascript… Thanks in advance!
Hi Gary, Luisa
It’s a bit late, but just came to this blog for the first time looking for a solution of another map related problem. I had the same problem with several markers on the same spot. My solution is to place the new marker not exactly at the same coordinates, but move it a little bit if there is already another marker there. In the script that builds up the HTML I build up to lists (variables) with the lat and long coordinates in parallel. For every new marker I check first, how many times the new coord is in the list already (PatternCount) and then I add a little value to the long coord, if both are already used, multiplied by the times used. Maybe this helps. Good luck.
Hi Douglas,
Just to say many thanks for sharing this technique (and all the others on your blog).
I’ve just built a map with 20,000 points (had the lat, longs already!).
Bit of a monster but it works great after a short load time.
Thanks
Olly
UK
20,000 data points is impressive. Glad to hear that that the blog was useful.
I am involved in a research project (non-commercial) in which we want to place interpretations of the meanings of town names on Google Earth or Google maps. Your script is just what we need.
However, not being scriptwriters or programmers, I wonder if you could tell us which parts of your demo script we would need to change so that the field names for towns in our database will work in your script?
Would that be ok with you for us to do this?
It would also be helpful if you could tell us where the script is located on the FMKR Pro 11 menus….
Many thanks. Your willingness to share is very heartening.
Hi Gary,
The script you are looking for is the one called ‘Generate JSON, HTML and Display Map’. About fifteen lines down there is a ‘Set Variable’ step that defines the Info ($info) displayed on the map pins.
Data::Address_Street& “, “&Data::Address_City& ” “&Data::Address_Prov|State& ” “&Data::Address_Zip|PostalCode& ” “&Data::Address_Country
The variable is set to $info. Right now it contains this data from the demo file. If you add your fields (and data) to the database, then edit this script step, the data should show up in the pin info popups.
A couple of steps below that is another step that generates a variable called $json. Contained in here is a field called Address_Label. That is the main name of the pin.
Hope this helps.
Doug
Many thanks for your prompt reply Doug. I think I will be able to work through that.
There is one other point though: we are working with town names, so we have lat and long data rather than street address. Is it possible to adapt your script to get lat and long rather than street address?
Much appreciated.
If you have the lat and long data, simply import it to the database into the define fields.
Then add more fields, or simply rename the address fields to something that suits your needs better. Import your other info into those fields. Even if you rename the fields, they will still be in the script. FileMaker takes care of updating that type of change.
Hi, this is a great bit of code, however I’ve got a bit stuck! It is probably me – but may be google? When I add an address and click get co-ord I am getting a long of the actual long + I’ve tried to work out your position script but it’s doing my head in! I was wondering if someone could check if it works OK for them – then I can go back to basics. My google response is OK just the interpretation is corrupting Long and hence I can’t plot my map.
GOOGLE RESPONSE:
LONG (via script) is -95.4568489
GPS HTML error comes up as:
One thing to check is to make sure there are no commas in the text of the address line.
thanks Doug, i appear to have the same error when i check your addresses as well. they are getting the extra text appended to longtitude thanks mike
HI moderator – I can’t see all the code I cut and paste into my previous message! so it doesn’t make sense – please discard and I’ll try and resubmit
HI Doug, I’m struggling to get my Q to you as the html is being interpreted by the browser!
My issue is the long is showing as the actual longitude with some text on the end of it from the google response
-95.4568489 PRE BODY HTML – I’ve removed the html formatting
Google response is:
“”
“”
Hope you can see this – if not I’ll give up as I don’t do html…. I’ll not be offended if you decline putting these up 🙂 Thanks Mike
Doug and Mike,
I am having the same problem with the longitude.. Even if i rerun the sample data i will get the same error. if i remove this and input 200 for the GPS HTML Error it will work.
It is possible that what is being returned from Google has changed since I develop this demo file. I have also uploaded a modified version of the demo, so perhaps test that you have the latest version.
If that doesn’t help, the way I would debug this is have a look at the Get Coordinates script closely. Set the $Response_From_Google variable to display the source text result returned from the Web Viewer to a Custom Dialog. Have a close look at what is being returned and where you want to parse the information out of. Then have a look at the Set Field steps and modify the position of the text you are trying to Parse. Hope this helps.
Hi All,
I tried to get an API but Google says they don’t use them anymore.
What’s the work-around?
https://developers.google.com/maps/documentation/javascript/
https://developers.google.com/maps/documentation/business/guide
I want to show specific schools and specific businesses nearby these schools. I would like the pins to be colored differently for the two types. I found the fillcolor property in the google documentation. How (where) do I set the different color property and marker type. By the way. The file works beautifully in both 11 and 12. Thanks so much.
The colours are going to be stored in the Javascript file. You will probably need to download a copy of http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js and modify it. Then change the reference in FileMaker’s javascript use this modified file hosted on your own server. I am not sure how you achieve having two separate colours, you are going to need to dig into Googles documentation for that.
Doug first of all thanks for sharing, very nice job. I tested it in filemaker 12 and it works great as expected. I also tried it in ipad filemaker go 12 and it doesnt wok because it cannot save a file in the path…. do you know any work around?
Change the Export Path to Documents (or the Temporary folder) in the Settings tab. That way the script will save the files to the Documents folder instead of the Desktop (iOS doesn’t have a Desktop, but it has a Documents folder dedicated to FileMaker Go and it allows Temporary folders as well).
If you need to use FileMaker Go 1.2 and stay compatible with the FM7 format, you could experiment with using the Export Field Contents format instead of Export Records. According to the manual, http://www.filemaker.com/support/product/docs/11/filemaker-go/fmgo_development.pdf, FileMaker Go 1.2 (FM7 format) does not support the Export script step but it does support the Export Field Contents.
I see in the manual that “FileMaker Pro (fp7) exports text as UTF-16, but FileMaker Go exports text as UTF-8.” (http://www.filemaker.com/support/product/docs/filemaker-go/fmgo_development.pdf) If platform = FM Go, then export using Export Field Contents, else use Export Records with UTF-8 settings turned on for the Mac/Windows.
Also, I saved a copy of the file in FileMaker 12 and then opened the file on my iPhone. Because FileMaker Go 12 supports the Export Records step, it seems to export properly in FM Go 12.
The only reason I am using Export Records in the script is because it gives control over UTF-8/UTF-16, whereas Export Field Contents does not and the file needs to be in UTF-8. Add a branch in your export script. I have a whole rant about FileMaker’s support for UTF-8 vs UTF-16 in the works. FileMaker claims to be all about the Internet, but lack basic export support for UTF-8, the language of the Internet.
Good luck.
I have been trying to do this in my database for 5+ years and this really works! Thank you so much. I am wondering about an additional function. I would love to have the ability to calculate the distance between points on the map. Is there any way to add that ability? Thanks! Lori
Hi Lori,
As I mention in the article, I am no JavaScript expert. There may be some way to achieve your goal but I can’t help you there. Check the google maps API and then perhaps hire a JavaScript whiz to see if you can get what you want. Good luck.
Thanks for your response. I did have one other question. I ended up manually populating the lat/long for each record because I could not get the coorindates script to work. Would you mind taking a look at this and letting me know if you see anything wrong. Basically the screen just blinks that the script is paused and when I hit continue, nothing changes. Thanks! Lori
Go to Layout [“VENUES TABLE” (Promoters)]
Set Web Viewer [Object Name: “GPSWebService”; URL: “http://maps.google.com/maps/geo?q=” & Substitute(Promoters::Venue Street1; “,”; ” “) & “,” & Substitute(Promoters::Venue City; “,”; ” “)& “,” & Substitute(Promoters::Venue State Province; “,”; ” “)& “,” & Substitute(Promoters::Venue Postal Code; “,”; ” “) & “&output=csv&key=” & Map Settings::gGoogle_API_Key
Loop
Pause/Resume Script [Duration (seconds): .1]
Set Variable [$Response_From_Google; Value:GetLayoutObjectAttribute(“GPSWebService”; “content”)
Exit Loop If [not IsEmpty($Response_From_Google)]
End Loop
Set Field [Promoters::Latitude; Filter(Middle ( $Response_From_Google ; Position($Response_From_Google;”,”;0;2) + 1; (Position ($Response_From_Google;”,”;0;3) – Position($Response_From_Google;”,”;0;2))-1); “0123456789.-“)
Set Field [Promoters::Longitude; Filter(Right ($Response_From_Google; (Length ( $Response_From_Google) – Position($Response_From_Google;”,”;0;3))); “0123456789.-“)
One thing to check would be your Google API key. You need your own key for this to work.
Make sure that you have a Web Viewer named “GPSWebService” on your layout.
Try expanding the named Web Viewer “GPSWebService” to see what text is being returned in the Viewer. There may be an error code coming back from Google that will tell you what is wrong.
If you are using FileMaker 12, you could try using ‘Insert from URL’ instead of the retrieve content Web Viewer technique.
I have a question,
When I replace the records with my records, the map no longer shows up. What do I need to do for it to work?
At first it was working and now all of the sudden it is not.
You need your own Google API Key. Also make sure you run the script to get Coordinates for each address from the Google server.
I am also having a problems with the Filemaker Go app. I changed it in settings to documents and temporary path but the box keeps staying blank when I hit display map.
What do you think the issue is?
If [Get(SystemPlatform=3]
Go to Layout [“Map View” (Settings)]
Pause/Resume Script [Duration (seconds):1]
Set Variable[$path; Value:”file:”&Get(DocumentsPath)&”mapping.html”]
Open URL{No dialog;$path]
Hope this will help you.
Do I need to create a brand new script with this or edit the one in the demo?
Just edit the demo in the end
Okay. I seem to still be having some problems. The scripts in the system are much more complicated looking than that. I am still fairly fresh at this, I need a more detailed walk through of how to get this working on Filemaker Go. Could you help me out?
Will, if you just need multiple adresses and not a cluster you can see this free demo that it uses a custom finction and its compatible with ipad and iphone
https://fmdev.filemaker.com/message/104072#104072 (by Thomas Kunetz)
Thank you! This really helped.
Another question: Is there a possible way to get the “drop a pin” function in the google maps on filemaker?
On this script that you posted, which script is that I am applying this to?
-Import records
-Generate JSON, HTML, and Display Map
-Display Map
??
Would you like me to email you the file so you can make the quick change?
Generate JSON, HTML, and Display Map
the main problem with the ipad is that you cant see the map inside filemaker thats why we are opening a URL. with the other method we see the map inside the webviewer
Yes. I do like the other method but what is the max amount of contacts that it allows for us to see?
You have been a lot of help so far.
at least 206
Well, I need a map that will host at least 1,000. Is there a similar map template that can support this?
Well, I need a map that will host at least 1,000. Is there a similar map template that can support this?
Is there a way to integrate a “Drop Pin” function in the coding of Gooogle Maps.
I found a way to host multiple pins for a viewing, but I want to be able to create a new location of my current position and save it as a record. This will be for sales reps on the field.
hello
compliments to the genius of this software. In save a copy for formatting in Italian, I noticed that the system did not generate more map. The problem is due to the decimal, as in Italian in the format are not used. I just modified the script Generate JSON, HTML and Display Map from 180 to 90 to 1800000000 and 900000000.
The day 03.08.2013 has expired the v2 version of Google maps api and the system no longer generates the coordinates and the map. Does anyone have the modified scripts for the V3?
Sorry for the errors, translated by google translator
Roberto
Thank you for this very nice piece of programming. I am running accross a problem on iOS, in that the map will not display in the browser. I can view the same map in Safari on the desktop, or from other browsers (IE) etc. I am using iOS 6.1.2. Has something changed in the way apple renders the file?
OK. Figured out my error (which was addressed in an earlier post). In Filemaker Go, you have to use the open URL or it will open in quick quickview I believe. Thanks again.
Good afternoon.
How I can run this application in Russia?
I have problem with receipt coordinates. In GPS HTML Error field – 610 and coordinates is 0 0 0.
I have my own API key.
Unfortunately for search coordinates the system uses bee v2 ended March 8, 2013. The key to the v3 API is only used to generate the map. Now look for the coordinates must use the API v3, but I have no idea how to get it done in Filemaker, if someone has already modified the script and publish them …..
Just tried the updated version and it works great!!
Even works after converting to FM12.
Thanks for all your efforts.
-Jeff
Douglas,
I’m not sure if I messed something up or what exactly is going on, but when I click the “Get Coordinates” button a series of pop up windows appear prompting a file download and when I click on the “Get Coordinates in Browser” button I am directed to the following error page:
http://maps.googleapis.com/maps/api/geocode/json?address=1252%20Industrial%20Pkwy%20N,Brunswick,OH,,44212&output=csv&key=AIzaSyBlbdLXHFlQPONdI6sWJW7sTtxbsySZFcs&sensor=true
In case it does not open for you, the message states:
“results” : [],
“status” : “REQUEST_DENIED”
I did follow all the steps for setting up the Google Maps API and included that in the Settings tab so I’m not sure whats going on.
As a potential troubleshooting attempt I did attempt the same steps with the original addresses in the database afterwards and the “Get Coordinates” button resulted in the same pop up windows, but the “Get Coordinates in Browser” button actually worked. I did not enter an API code when I did the troubleshooting.
Do you have any ideas of what might be happening?
Thank you in advance,
Zak
Only run the Get All Coordinates when you have new addresses added. Google has a time out when too many addresses are attempted at one time. I have experienced the time out, when I ran a few thousand addresses at once. Try the file again tomorrow. Make sure you have the latest version of the demo. For deployment purposes, you are best to get a Google API key.
Thank you for the reply, I am receiving the error regardless of the number of coordinates I am trying to process unfortunately. I have also tried using the demo with and without an API key. The primary issue is that when I click the “Get All Coordinates” button pop up windows appear as opposed to the demo fetching them and filling them into the appropriate fields. Do you have any ideas what might be causing this? If you need I can take a screen capture video to demonstrate what is happening.
What platform are you running this on? Mac/Windows FM11/FM12?
Windows 7 and FM12 Advanced
Try changing the routine in Get Coordinates script to use Insert from URL step. Remember to put the field you insert to on the layout. I will update the demo to this approach shortly. Use the FM 12 demo of Cluster Maps from here: https://hbase.net/2013/06/21/cluster-maps-continued-perimeter-search-in-filemaker-pro-12/
Specifically, here is what I did:
Added a field called XML Coordinates Catcher and put it on the layout.
Modified the “Get Coordinates for this Address” Script
Go to Layout [ “Data Entry View” (Data) ]
#NOTE: Make sure the Field inserted to is on the layout. Otherwise: Gotcha!
Insert from URL [ Data::XML Coordinates Catcher; “http://maps.googleapis.com/maps/api/geocode/json?address=” & Substitute(Data:: Address_Street; “,”; ” “) & “,” & Substitute(Data::Address_City; “,”; ” “)& “,” & Substitute(Data::Address_Prov|State; “,”; ” “)& “,” & Substitute(Data::Address_Country; “,”; ” “)& “,” & Substitute(Data::Address_Zip|PostalCode; “,”; ” “) & “&output=csv&key=” & Settings::gGoogle_API_Key&”&sensor=true” ]
[ Select; No dialog ]
Commit Records/Requests [ No dialog ]
Set Variable [ $Response_From_Google; Value:Data::XML Coordinates Catcher ]
#Parse the result from Google into the appropriate Longitude, Latitude, Precision and Error fields.
Set Variable [ $LongLatChunk; Value:Extract ( $Response_From_Google ; “\”location\” : {” ; “\”location_type\”” ) ] Set Field [ Data::Latitude; Filter(Trim(Extract ( $LongLatChunk ; “\”lat\” : “; “,” )); “0123456789-.”) ]
Set Field [ Data::Longitude; Filter(Trim(Extract ( $LongLatChunk ; “\”lng\” :” ; “},” )); “0123456789-.”) ]
Set Web Viewer [ Object Name: “GPSWebService”; URL: “” ]
For some reason it still isn’t working. I’m beginning to think it’s an API issue because I keep getting the error when I click on the “Get Coordinates in Browser” button which states “Status: Request Denied” I’m confused because I followed Google’s own directions to set up the API and it still isn’t working.
I tested on io7 and the htm file doesn’t show the map, i tested on maverick and fmp v2 (added the new url capability) and it is perfect. may you can help me?