In this post, we will talk about how show the contractor information in the map by an icon in a map from FileMaker using Html and JavaScript. It will work above FileMaker version 16.
Overview:
Initially, we need to create a Google API Key. then we need to create a FileMaker database and enter the contractor information. After that we can able to convert the contractor information into HTML and display those information plotted in the map using Google API key.
Step 1 : Generating Google API Key for Map.
- Go to the Google Developer Console (https://console.developers.google.com/) and create a project.
- Navigate to the Google APIs and Enable the Geocoding API, Places API, Maps JavaScript API and Geolocation API for the Project
- From the Navigation menu, select APIs & Services > Credentials. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key (an encrypted string).
- Click Close. The new API key is listed on the Credentials page under API keys. (Remember to restrict the API key before using it in production.)
Step 2 : Create a “Mapping Point” database in FileMaker.
- Create a new Database in FileMaker and name it as “Mapping Point”.
- Create a table named “Contractor” and enter the contractor information like “Contractor Name, Category(i.e. Excellent, Good, Fair, Poor, Do Not Use, Give them a Try & Not Ratable), Address, Street, City & State”.
- After entering the address, we have created a script to generate “Latitude and Longitude” for each Contractor stored into their respective fields using the API key that we have generated. Replace YOUR_API_KEY with your API key (the encrypted string).
- After running the Above URL, we can get the Response for the URL in the XML format, then we have to Extract the Latitude and Longitude as follows
we can get the Latitude & Longitude for the Contractor as Follow
Step 3 : Converting the contractor information into Html.
- In Contractor list, we have placed a button named “Map”. If we press this button then it will convert the each contractor information into an Html like the image given below.
- Like this, it will convert the all the contractor information into a Html. After converting, call this html in the web viewer where we will show the contractors in map.
- In the Map, we will display the contractors using the icons that are based on the category which are selected. Each category will have different icons.
- Click the icon in the map to view the contractor information. Above the map we have placed the category checkbox. Click to select the category, then it will display the contractors in the map for the selected category.
If we implement the above mentioned steps, then we can display the contractor information in the map.
The team at FMDBSolutions hopes this article taught you how to Display Contractor Information in Map from FileMaker using Html and JavaScript. FMDBSolutions is a team of well-qualified experts that have a lot of experience with the many versions of FileMaker Pro and the FileMaker Go app too.
Our team knows all about transitioning, migrating, converting, and upgrading for FileMaker. Companies that require FileMaker Integration can also use our services. We have worked with clients from the USA, Australia, and Singapore and will complete your FileMaker assignment in the best possible way at a lower price but the same or higher level of excellence.
If you want solutions to your FileMaker database, we can help. Click the below box for a free FileMaker consultation
You can also leave us your email below for receiving new updates regarding FileMaker and our company.
