In this post, we will talk about how to show the weather information by clicking any random location in a map from FileMaker using Html and JavaScript. It will work above FileMaker version 16.
Overview:
Initially, we need to create two API’s. First one is a Google API Key using this we can able to display the map in the FileMaker database and the second one is we need to create an account in the “apixu.com” to generate an API using this we can able to generate the weather information of a location. Using these two API’s we can able to display the weather information in the map using HTML and JavaScript in the FileMaker database.
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 : Generate an API key in the “apixu.com”.
- Open a browser and browse the “apixu.com”.
- Create a new account in the “apixu.com”, it will automatically generate an API key for an account.
- After creating an account in the “apixu.com”, it will display the API key as given below,
Step 3 : Create a “Mapping Point” database in FileMaker and displaying the weather information in the Map.
- Create a new Database in FileMaker and name it as “Mapping Point”. Show the map in Web Viewer by including the Html code and you must include a Google API key with every Maps JavaScript API request, replace YOUR_API_KEY with Google API key (the encrypted string).
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<title>Mapping Detail 5/9/2019 19:16:13</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
</head>
<body>
<div id=”map-canvas”></div>
<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Map”></script>
</body>
</html>
- Below to the above mentioned HTML code, need to mention the following JavaScript Code and replace YOUR_API_KEY with APIXU API key (the encrypted string).
- After the HTML and JavaScript code mentioned in Web Viewer, the following Map will display and there clicking any of the random point in the Map, it will display the Location, County, Temperature, Humidity, Wind Speed, Wind Direction, Condition, Latitude and Longitude information of the Point Marked.
If we implement the above mentioned steps, then we can able to display the weather information in the map in FileMaker database.
The team at FMDBSolutions hopes this article taught you how to display the weather 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.