Please Note:
We have a newer Map Widget product that we are now offering FREE! The blog post you are viewing and the accompanying video reference some Google Maps functionality that has not been implemented in the Map Widget at this time.

Since the addition of the web viewer to FileMaker, we have been able to use JavaScript to personalize aspects of the user interface that couldn’t be done before. One of these boons comes in the form of the Google Maps API. By utilizing Google maps and loading it with data from FileMaker, we can display customized map info. While incorporating address information to render markers on Google maps is fairly common these days, we have made some additional strides in working with the common Google api and are able to leverage some useful but obscure API services.

The first one of these exciting services, often overlooked, is clustering. Clustering provides a way to manage a scenario where you have too many markers. It provides a grouping technique for several markers to display as a single marker. This has many uses, one of which is to help you navigate quickly into the region you need to look at, without accidentally clicking on the wrong marker. That is a big one when you are working on a mobile device. Trying to click on just one marker in a sea of markers is difficult. You find yourself pinch zooming in awkward ways, trying to zoom in enough – to separate the markers enough – to get a clean click area. With the cluster, you will automatically be zoomed into the area by touching the cluster and can then drill down quickly to the single marker you seek.

The second of these services is a bit more common. It is the ability to add color to the markers. The ability to show all of your customers on a single map is great. When you are able to color-code them, you can truly explore your data. Having a different colored marker for varying sets of data becomes useful when you can adjust it easily. You might want to show the sales rep associated with a customer or mark the perspective value of customers in different colors. This is where refining the UI comes in to play even more.

In order for colors to help differentiate your data, it is necessary to have both a legend of the color’s meaning and the ability to select which items in the list to display. We have been able to use a combination of the FileMaker button bar and a JavaScript color picker to provide elements that make working with your data a lot easier. Teaming up these elements makes working with a large plot of color-coded pins much easier.

(Additional resources.)