Web Viewer – Maps

8

In this tutorial I’m going to show you how to get a contacts address display in Google maps, right within your database! Cool, right? Beware though, this is quite tricky to follow to you will need quite a bit of FileMaker experience!

Before we go any further this tutorial will require you to create custom functions. Custom Functions can only be created in FileMaker Pro 13 Advanced! So if you do not own a copy, I’m sorry, you will not be able to achieve this.

Why?

Before we start, I thought it would be a good idea to explain why I think that this is a useful thing to have within your database. FileMaker do allow you to create a web view with Google maps without any custom functions. This is what it will look like…

Google map

 

Cool right? Not only does it look good, it allows you to interact with the maps too! You can zoom in and out, drag up and down, all as if you were actually on the google maps website. So I do think it is a very cool feature of FileMaker.

However after I saw the below design I knew that this would look and perform much better in my database. Your users will not encounter the clutter of side menus and pop up boxes. This looks cleaner and much neater within your layouts.


Google Map Custom

I think that this may view really enhances the layout and helps to add a bit of colour to the layout. Not only that, it’s also a map! So my users can quickly see roughly where a customer is based. It is possible to set any kind of zoom you wish, so you can have the map very close up or as far out as mine. Its your choice, whatever you think looks best on your layout.

That is why I prefer this map view to the standard one.

 

How

To create your own customer map view, as I mentioned earlier, you next to create some custom functions. These custom functions withdraw an address from your record, search for it via Google Maps and then formats the web viewer to get rid of side menus.

  1. To begin go to ‘File’, ‘Manage’, ‘Custom Functions…’ and a new window will appear called Manage Custom Functions.
  2. Then, click the new button.
  3. A new window will appear, and it is here that you will create the custom function!
  4. Set the function name. Call the function ‘GetMap’ which will allow you to type the same commands as me to reference this new function. This function is setting the variables and linking in your record data.
  5. Before you get started with your function, you need to list any parameters involved. For this function there will be eight.webViewName
    zoom
    address1
    address2
    city
    state
    postalCode
    countryThe first two parameters are essential. The other six really depend on how many address fields your records have. In my database each customer has an Address 1, Address 2, City, County ( state ), Post Code and Country. I would recommend a similar set up for yourself. However if you require less just skip the relevant variable.
  6. Next you need to define the function.
    Type the below… ( or copy and paste, works just as well! )START
    Let (
    [
    address = Substitute (
    address1 & ” ” &
    address2 & ” ” &
    city & ” ” &
    state & ” ” &
    postalCode & ” ” &
    country ;
    ” ” ; “+”
    ) ;
    size = GetLayoutObjectAttribute ( webViewerName ; “width” ) & “x” & GetLayoutObjectAttribute ( webViewerName ; “height” )
    ] ;
    “http://maps.google.com/maps/api/staticmap?center=”
    & address &
    “&zoom=” & zoom &
    “&markers=”
    & address &
    “&size=”
    & size &
    “&sensor=false”
    )
    END
    The above is setting up the URL command that Google Maps will need to retrieve and configure the view.
    ( I know we are from the UK so we do not have state, however I found the method from and American source and I have not bothered to change the name! )
  7. Your custom function is complete! Now you need to create an configure the web viewer.
  8. Go to whichever layout you want this to appear on, and create a new web viewer.
  9. In the configuration of the web viewer select the option ‘Custom Web Address’ and then click on the ‘Specify…’ button. This will open a new window where you can type your commands!
    Configure Web Viewer
  10. In this new window you must specify the new function that we have just created. To either find it in the function menu or type ‘GetMap’. Alternatively, copy and paste the text below…GetMap ( “Map1” ; 6 ; Customers::Address 1 ; Customers::Address 2 ; Customers::City ; Customers::County ; Customers::Post Code ; Customers::Country )The text that says ‘Customers::Address 1’, for example, will need to be change to your table and field names relatively. Just make sure that your address 1 field matches up with my Address 1 field and so on until you have changed them all.The number 6 that you can see from my calculation is the zoom level. Feel free to change this to a zoom level that you like.
    Web Viewer Specify
    ( Just remember that if you changed the quantity of parameters previously, then your calculation here will be slightly different here too! )
  11. Now specify the following check boxes. Just set these to your personal preferences.Screen Shot 2014-05-09 at 12.33.02
  12. That’s it! Your done! Switch back to browse mode and have a look!

 

Feel free to comment or message me if you encounter any problems and I will try my best to help!

Please also note that I am not the creator of this function and I am not trying to take credit of it! I simply think its brilliant and wanted the rest of the world to know about it!

FavoriteLoadingAdd to favorites

8 COMMENTS

  1. I couldn’t get this to work – the webview came up with ‘The webpage cannot be found’. I’m not sure what I’m doing wrong! I have the solution that came with FMP 13 Advanced, which has the same custom function as you. This solution brings the map out properly, but when I transfer it to my own file, it won’t work.

    • Hi,

      Normally if Google cannot find the address the web view will either display a white screen or a pointer in the middle of the ocean! This does not seem to be the case with you.

      This makes me think that the error will be with the way that the URL is put together. Is the any chance that you could send me your custom function codes? I’ll take a look and see if I can spot anything!

      My email: sam@filemakerexamples.co.uk

      Hopefully I can help!

      Thanks,
      Sam

  2. Hi Sam, Thanks for your message from ages ago – I’ve been distracted and ditched the map for a while, but I’m coming back to it now, and I’m still struggling. The web address i’m putting into the Web Viewer Setup is this:

    GetMap ( “Map1″; 12 ; Addresses::AddressOne ; Addresses::Neighbourhood; Addresses::Town ; Addresses::County; Addresses::Postcode; Addresses::Country)

    The custom function is this:

    Let (
    [
    address = Substitute (
    address1 & ” ” &
    address2 & ” ” &
    city & ” ” &
    state & ” ” &
    postalCode & ” ” &
    country ;
    ” ” ; “+”
    ) ;
    size = GetLayoutObjectAttribute ( webViewerName ; “width” ) & “x” & GetLayoutObjectAttribute ( webViewerName ; “height” )
    ] ;
    “http://maps.google.com/maps/api/staticmap?center=”
    & address &
    “&zoom=” & zoom &
    “&markers=”
    & address &
    “&size=”
    & size &
    “&sensor=false”
    )

    I get the message “the webpage cannot be found” – error “HTTP 400 Bad Request”

    I’m beyond my competence here! If you could have a look I’d really appreciate it.

    Fergus

  3. July 2016 : If you google “Google Static Maps Developer Guide”, you find all the information on this topic. Nowadays it’s necessary to obtain first an API number at Google (free for normal usage).
    I could perform the search and mapping of a location but I’m struggling with the “labeling”. When my URL code is launched in Google Chrome, there is no problem. The bulbs are referring to the correct address, but in the WebViewer of FM15 it seems that these “colored bulbs” don’t appear. Somebody knows the reason?

Leave a Reply