In this post, we will talk about how to retrieve and store the information of Location marked in the map by Clicking any of the point in Map from FileMaker using Html and JavaScript. It will work above FileMaker version 16.
Overview:
Initially, we need to create a Google API Key. Using this we can retrieve and store the information of Location marked in the map through the following steps
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 Detail” and show the Map in the Web Viewer by including the following HTML code and you must include an API key with every Maps JavaScript API request, replace YOUR_API_KEY with your 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&callb ack=Map”></script>
</body>
</html>
Step 3 : Showing the Location Information, On Clicking any point in Map.
- On Clicking any of the Point in the Map we showing the Address, County, Latitude and Longitude information of the Point Marked with Text Link Button “Set Location Details”
- Using the Following JavaScript Code we are Retrieving the Location Information and we must have to add this to the HTML code in Web viewer
Step 3 : Storing the Location Information in FileMaker Database.
- While on Clicking the “Set Location Details”, we are retrieving the Location Information and storing the Information in Location Information Table, for that we have to create a Script to store information through Parameter and have to call the Script in JavaScript through fmp URL as follows
- Then we can see the Location Information as Follow
- On Clicking any other Location in Map and Clicking Set Location details.it will also be stored as another record in Location Information Table.
If we implement the above mentioned steps, then we can Retrieve and Store the Location Information for Multiple Location
The team at FMDBSolutions hopes this article taught you how to Retrieve and Store Map Location Detail 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.
