Is there a way, given a street address, to generate a map. I have a license key for Google Maps API. I’m using this in my MS Access application to display a map on my Members form by making a REST call to Google Maps. Can this be done with Five?
1 Like
Hi @RMittelman, there is a way to integrate Google Maps into Five’s API. Our Developer Advocate @Pranoy will get back to you soon on this.
We have also published a blog post on the topic here: Building an Application That Interacts with the Google Maps API | Five (this doesn’t cover the integration of Google Maps into Five’s UI, but explains the general steps to retrieve data from Google Maps).
Thanks for the reply Dom.
I have read that article previously during my research. I didn’t find what I needed in that. My current Access application simply uses a “web browser control” which I embed in a form. The data source for that control is the URL build to request the map from Google. Currently I’m using their static map API, because I couldn’t find a switch for the URL to minimize the info panel that comes up in Google Maps. The static one is perfect. Just need to figure out how to embed a control in my Members form, and give it the proper URL based on the address. Thanks again…
Hi @RMittelman
you can generate a map based on the street address using the ‘Maps Javascript API’. You can create a function inside Five
- Clicking on ‘Logic’ → 'Code Editor
- Now on the extreme right, click on the ‘+’ button to add a new function
- In the dialogue box give a function a name
From here we start writing a function that can embed a map on our forms
- You can use JavaScript to create a Div that we can use to embed the map for Eg:
let map2 = document.getElementById('Five-Form-Switch-Contacted');
map2.insertAdjacentHTML('afterend', `<div id="map" style="width: 450px; height: 300px; transition: all .5s ease-in;"></div>`);
"Here, we are creating a div adjacent to the element with the ID ‘Five-Form-Switch-Contacted’. Replace this with the ID of the element where you want to place your map adjacent to.
- Now we can use the Maps JavaScript API ( Przegląd | Maps JavaScript API | Google for Developers) which a part of the Google Maps API, and we can use that to display the map. We will first add it as a script in our code:
let map2 = document.getElementById('Five-Form-Switch-Contacted');
map2.insertAdjacentHTML('afterend', `<div id="map" style="width: 450px; height: 300px; transition: all .5s ease-in;"></div>`);
var script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=initMap`;
script.async = true
document.head.appendChild(script);
Now our script looks something like this. here we are just adding a script element, appending it, and making it asynchronous (as their documentation says we need an async function). In this snippet replace API_KEY with your current API key
- Now we can easily create a map by following their documentation which suggests creating a variable called map
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
for example here it a creating a map for the respective LAT and LNG, so in our code it should look something like this :
let map2 = document.getElementById('Five-Form-Switch-Contacted');
map2.insertAdjacentHTML('afterend', `<div id="map" style="width: 450px; height: 300px; transition: all .5s ease-in;"></div>`);
var script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=initMap`;
script.async = true
document.head.appendChild(script);
function initMap() {
const myLatLng = { lat: Number(form.field.Latitude), lng: Number(form.field.Longitude) }
let map = new google.maps.Map(document.getElementById("map"), {
center: { lat: Number(form.field.Latitude), lng: Number(form.field.Longitude) },
zoom: 20,
});
}
now since you are using an address not lat and lng we can modify our initMap function a bit :
function initMap() {
const geocoder = new google.maps.Geocoder();
const address = "Your Address Here"; // Specify the address
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
const location = results[0].geometry.location;
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 15
});
}
We use Google Geocoder to simply modify the address to a location that can be used by their maps,
Save this function by clicking on the 
icon on the right and now we can use this function through the events in the form. You can do this by:
- Navigating to your members form in ‘Visual’ → ‘Forms’
- Click on the desired form and then select the ‘Events’ Tab
- You will see a bunch of events that your form goes through, you can use an event like ‘On Show’ here
This is the link for their documentation for their JavaScript API: Load the Maps JavaScript API | Google for Developers
Let me know if this helps with your case; otherwise, I am more than happy to hop on a Zoom call to discuss further
Thanks for the suggestions Pranoy!
I appreciate your help. Unfortunately, not really being a web developer, I’m having trouble understanding your code or where to insert it.
In addition, I’m using the Google Maps static map API, so it’s unclear what all your suggested code is doing. I can use the standard API, but the map that appears has the left sidebar extended, and must be closed manually. My research couldn’t find a switch for the URL to specify no sidebar or minimized sidebar. The static maps API does not have this issue, but I had to apply for a license key to use it.
In Microsoft Access, I have a Members form, and it has a web browser control which I have given a data source similar to the following:
I’m including my API key, please don’t share. Feel free to click the link above to see a static map of my address.
I don’t fully understand your code, but it seems #1 creates the area where the map should go, and the rest fills it with the map. If this is correct, could you suggest where to put the code to create the map area? It seems like I should only create this map area once when the form is first shown, then each time a new record is chosen, execute code to specify the URL above. Again, I’m not familiar with web development, but have a bit of JavaScript knowledge. Also, it looks like it depends on an existing control called “Five-Form-Switch-Contacted”. I presume I should use the name of the last control on my form instead, right? I’m not sure of the syntax to make it asynchronous, but the static maps URL above does seem to work synchronously.
Could you please suggest where I would call the code to create the map area? Am I correct in my assumption that you only create the area on the form once, then populate that area when a record becomes current?
Thanks…
Ron Mittelman
Hi @RMittelman
thank you for sharing the link, that actually allowed me to create a sample FDF for you that is using your link to create a static map inside a Form on click on a button, I am sharing that here with you
StaticMapTest-20240321-0425593191797.fdf (2.9 MB)
In this FDF you will find one table called ‘Address’ and a form on top of it. the form has a button called ‘Show Map’, clicking on that will reveal the map from your link.
You can do the same by following these steps:
-
Go to 'Logic → ‘Code Editor’ and from there you should be able to add functions
-
Now on the extreme right, click on the ‘+’ button to add a new function
-
In the dialogue box give a function a name, in the shared FDF I named that function Show Map
-
in that function paste this code:
function ShowMap(five, context, result) {
const url = 'https://maps.googleapis.com/maps/api/staticmap?center=2931+Circle+View+Drive,Simi+Valley,CA+93063&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c2931+Circle+View+Drive,Simi+Valley,CA+93063&key=AIzaSyB29AasjM3N0F5MTQyxGC2M7E49ovrsJ5w'
let map = document.getElementById('Five-Form-Field-FieldName')
map.insertAdjacentHTML('afterend', `<img src="${url}" alt="Map Image">`);
return five.success(result);
}
- In your response, you were asking how the code depended on “
Five-Form-Switch-Contacted”. That is because when we insert an HTML element through JavaScript, we are instructing the function on where to place that element in relation to an existing one, and we can do that by getting the ID of that element (which in the previous case wasFive-Form-Switch-Contacted).
Here, you will want to replace ‘FieldName’ in Five-Form-Field-FieldName with the ID of the field after which you want to place the map. For example, in the FDF, I am placing the map after the field with the ID “Country,” so for me, it becomes Five-Form-Field-Country.
Save this function by clicking on the icon on the right and now we can use this function
Now, let’s add a button to our form, which, when clicked, will show our map. we can do this by:
- Navigating to your members form in ‘Visual’ → ‘Forms’
-
Click on the desired form, here we will be using the ‘address’ form again
-
Click on the ‘Pages’ tab and then select the ‘General’ page
-
Now that we are inside the general page of our form, we can add a new button here by selecting the 'Fields tab and then clicking on the ‘+’ button on the right corner
-
Give this field a caption and an ID of your choice but in the display type select _Button
-
After step 5, go to the events tab for this field and attach this button to the OnClick event
Now save your form and run your application. In your end-user application, you should have a form with a button that displays the map from your static API
I forgot to add one more thing
To use the FDF I have attached, you can import it in Five by following this short guide: Export and Import FDF Files | Five | Low-Code For Real Developers
Thanks so much for all the help Pranoy!
After reviewing your response, I have a few questions:
1: I didn’t have much luck finding field ID’s on the form using your earlier methods. I haven’t ran Five on web, so am using debug menu. Seeing your code and evaluating the form field, is it possible that I can use “Five-Form-Field-” plus the defined name of the field on the form instead of trying to figure out the source of the generated page?
2: There seems to be much less code in your example than you showed me earlier. Is this because of the simpler URL request?
3: Is there an event which fires when you click on an item in the list to display the record instead of needing a button? I was hoping that the map would show immediately when displaying a record instead of having to click a button.
4: I really want to “calculate” the URL dynamically so it reflects whatever record I am on. Couldn’t I use stack variables to build the address dynamically? I would need to replace spaces with “+” signs. I can google JavaScript methods for replacing spaces with “+” characters. I would also need to test for apartment numbers, because I believe the map API blows up when you send “#”. So “1234 Main St. #12” will not work. Since a map doesn’t need the #, I could search for it and if found, delete it and any subsequent text in that field.
5: As I’m not that familiar with JavaScript, not sure how to do this. In C#, if you declare as const, you can only set the value once. So I can’t do a replace on the variable. Is that also true for JavaScript? Would I just declare it as var so I can modify it?
6: It seems like you are creating a new object every time you tap the show map button. If I click it repeatedly, it shows another map for each time you click it. Is there a way to create the element once when the form loads, and populate it when you click the button (or from an event fires for the current record… see #3 above…?
Thanks again for your help!
Hi Pranoy,
I’ve been trying to make your example more dynamic, and after much trial and error, I came up with the following changes (please feel free to suggest changes to make the JavaScript “better”).
function ShowMap(five, context, result) {
const api_key = 'myApiKey'
const url_map = 'https://maps.googleapis.com/maps/api/staticmap?center={addr}&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c2931+Circle+View+Drive,Simi+Valley,CA+93063&key={key}'
var str = five.field.Street.replaceAll(' ', '+')
var cit = five.field.City.replaceAll(' ', '+')
var sta = five.field.State
var zip = five.field.Zip
var addr = str + ',' + cit + ',' + sta + '+' + zip
var url = url_map.replace('{addr}', addr).replace('{key}', api_key)
//const url = 'https://maps.googleapis.com/maps/api/staticmap?center=2931+Circle+View+Drive,Simi+Valley,CA+93063&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c2931+Circle+View+Drive,Simi+Valley,CA+93063&key=AIzaSyB29AasjM3N0F5MTQyxGC2M7E49ovrsJ5w'
let map = document.getElementById('Five-Form-Field-Country')
map.insertAdjacentHTML('afterend', `<img src="${url}" alt="Map Image">`);
return five.success(result);
}
My idea was to store the api key in a table somewhere, but for now I just use a constant in the script.
Now the map seems to be more dynamic.
Question 1 above is answered, please ignore.
Question 4 and 5 are also answered, please ignore.
Questions 3 and 6 are still pertinent. I think I can modify the code to be similar to your earlier examples using async api call. I think if there is an event that fires when you first choose the address from the list, I could use that to define the map element, then add the calculated address to the element later.
A new idea is to remove the “map” element every time if it exists on the form, then just recreate it. That would eliminate the need to split the function. Is there something like “if exists (‘map’) then delete(‘map’)”? Could you suggest code for that?
Thanks again so much for your help.
I tried modifying some logic, then it just stopped working. I had hoped to delete the map each time the function is executed if it exists, because it just kept displaying more maps on the same page if the button is clicked multiple times. That worked, but after I moved the controls around on the form in design mode, it stopped working entirely.
Preferable to a Show Map button would be an event that fires whenever I click on the list to show a different record.
Here is the application after my changes:
StaticMapTest-20240324-2227141963961.fdf (2.9 MB)
Hi @RMittelman
To answer questions 3 and 6 you can attach this function to the event ‘On Selection’ inside the form
- As usual click on ‘Visual’ → ‘Forms’
- Here select the desired form, click on the ‘Events’ tab, and simply select the showMap function for the ‘On Selection’ event
this should trigger the function whenever you select a record from the list
Now to prevent duplicate maps from generating we need to add a check condition in our code, we can modify our function into this:
function ShowMap(five, context, result) {
// Identifier for the map image element
const mapImageId = 'google-map-image';
// Check if the map image already exists
if (!document.getElementById(mapImageId)) {
const api_key = 'myApiKey'
const url_map = 'https://maps.googleapis.com/maps/api/staticmap?center={addr}&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c2931+Circle+View+Drive,Simi+Valley,CA+93063&key={key}'
var str = five.field.Street.replaceAll(' ', '+')
var cit = five.field.City.replaceAll(' ', '+')
var sta = five.field.State
var zip = five.field.Zip
var addr = str + ',' + cit + ',' + sta + '+' + zip
var url = url_map.replace('{addr}', addr).replace('{key}', api_key)
//const url = 'https://maps.googleapis.com/maps/api/staticmap?center=2931+Circle+View+Drive,Simi+Valley,CA+93063&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c2931+Circle+View+Drive,Simi+Valley,CA+93063&key=YourAPIKey'
let map = document.getElementById('Five-Form-Field-Country')
map.insertAdjacentHTML('afterend', `<img id="${mapImageId}" src="${url}" alt="Map Image">`);
}
return five.success(result);
}
Replace your existing code with the revised version, and it should no longer generate duplicates. It adds a check to determine whether an element with the ID ‘google-map-image’ already exists.
Let me know if this helps or not.
Hi Pranoy,
Thanks for all of the help. We are definitely getting closer. At first glance, it looks like your code will not work correctly, because if the map IS already there it does nothing. While this seems right initially, I had hoped that if I change the address, then call the function on the on validate event, it would update the map. In that case, it would do nothing because the map was already there. My earlier suggestion was to delete the map if it was there. Here is what I have so far:
function ShowMap(five, context, result) {
// const url = 'https://maps.googleapis.com/maps/api/staticmap?center=2931+Circle+View+Drive,Simi+Valley,CA+93063&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c2931+Circle+View+Drive,Simi+Valley,CA+93063&key=YourAPIKey'
// let map = document.getElementById('Five-Form-Field-Country')
// map.insertAdjacentHTML('afterend', `<img src="${url}" alt="Map Image">`);
// const mapImage = document.getElementById('google-map')
// if(mapImageId != null)
// mapImage.remove();
const api_key = 'YourAPIKey'
const url_map = 'https://maps.googleapis.com/maps/api/staticmap?center={addr}&zoom=16&size=600x255&maptype=roadmap&markers=color:red%7Clabel:A%7c{addr}&key={key}'
var str = five.field.Street.replaceAll(' ', '+')
var cit = five.field.City.replaceAll(' ', '+')
var sta = five.field.State
var zip = five.field.Zip
var addr = str + ',' + cit + ',' + sta + '+' + zip
var url = url_map.replaceAll('{addr}', addr).replace('{key}', api_key)
let map = document.getElementById('Five-Form-Field-Country')
map.insertAdjacentHTML('afterend', `<img id="google-map" src="${url}" alt="Map Image">`);
return five.success(result);
}
The first set of commented lines is from your original suggested code.
The second set of commented lines was my try to remove the image in case we call the function another way with an active record, such as validating an address change, or clicking the Show Map button. With this code un-commented, the map never shows at all.
I think I have a bigger problem. Calling the code from the On Selection event causes issues. I added a second address to the list. When clicking on either address in the list, the first time nothing happens. Clicking the other address from the list shows the map, but it is the map of the other address. This behavior continues for each clicking of the list on the other record. This indicates to me that five.field.{whatever} is not in scope until after the record has been shown.
If I move the function to the On Show event, I get a hard error the first time saying “Cannot read properties of null…” If I click OK on the error message, next time I click on an address, the map displays properly with the correct address that I clicked.
This tells me that the On Show event is more proper, because the form fields are now correct for the clicked record. But it comes with a hard error. Is there any way to do error trapping in the JavaScript? If so, would it just ignore the map first time the form is shown, or is there a way to pause the code and re-try it once the record is fully loaded?
So the 2 issues are:
- How to show the map without the initial error
- How to delete the map and recreate it if I’m updating address on the same record
It turns out when calling the event from clicking a new record in the list, we don’t have to worry about the map “doubling”, because the clicking of the new record seems to cause the form to clear and re-load without the map image, so the function creates a new map each time.
Sorry to be so long-winded…
UPDATE: I noticed there was a PEBCAK error in the second commented block. When I fixed that and un-commented the block, everything worked properly. I could then click the Show Map button and it properly deletes the map before displaying it again. This opens the door to call the function from the On Validate event of address fields. Yay!
So the only remaining issue is the hard error when you choose the form and click an item in the list for the first time only.
UPDATE 2: I surrounded the insertAdjacentHTML command with a Try-Catch and that stopped the hard error. But we still don’t get a map the first click on the list.
Hi @RMittelman
StaticMapTest-20240328-0125253689627.fdf (2.9 MB)
I have attached an FDF with an updated ShowMap function. Your JavaScript was mostly correct but had some minor errors. Now, it works in a way that if you update the address and execute the function again, it will delete the old map and recreate a new one with the new address on the form.
Regarding the errors you are getting with the events, there seems to be a refresh issue. I’ll need to look a little more into it and come back to you. In the current FDF, the ShowMap function is attached to the button and the ‘On Selection’ event.
Let me know if this was what you were looking for in terms of the function, or if your aim was something else
Hi @Pranoy
I have tried your fdf, and it still is not operating the way I envision. It still does not show the map for the first time you pick an address. You need to pick another address for it to show the map.
There seems to be a big difference between using On Selection versus On Show:
On Selection does not cause an error the first time choosing an address, but the map just does not show. Thereafter, each address selection shows the map, but it maps the address from the prior selected record. Try this by clicking on each address one after the other. You will see the map is for the wrong address. I believe the context of the new record has not yet refreshed.
On Show causes a hard error on the first address, but after that each address selection shows the proper map. It also refreshes if you change the record. I put ShowMap in the On Complete event to accomplish this, rather than the On Validate event for each address component. This is because if you change the address to somewhere in a different city, it may not properly show the map until you also change the city value. By coincidence, I had also discovered how to remove the map if it was already on the page.
Please see my code here:
function ShowMap(five, _context, result) {
// clear map off page if it is present
const mapImage = document.getElementById('google-map')
if(mapImage != null)
mapImage.remove();
const api_key = 'YourAPIKey'
const url_map = 'https://maps.googleapis.com/maps/api/staticmap?center={addr}&zoom=16&size=400x200&maptype=roadmap&markers=color:red%7Clabel:A%7c{addr}&key={key}'
var str = five.field.Street.replaceAll(' ', '+')
var cit = five.field.City.replaceAll(' ', '+')
var sta = five.field.State
var zip = five.field.Zip
var addr = str + ',' + cit + ',' + sta + '+' + zip
var url = url_map.replaceAll('{addr}', addr).replace('{key}', api_key)
let lastField = document.getElementById('Five-Form-Field-MapHolder')
try {
lastField.insertAdjacentHTML('afterend', `<img id="google-map" src="${url}" alt="Map Image">`);
}
catch{
}
return five.success(result);
}
I also changed the URL template a bit, by replacing the second address with {addr}. This causes the pin to show properly. With the address hard-coded at the end, the pin only showed when you selected the proper address. Now it shows always.
So the remaining question is: How do I get the map to show the first time you select an address? I understand the five.field.whatever variables do not yet have scope. Are there any other variables, such as stack or context variables that may have scope? If so, I could put them in my Catch block and display the map properly even the first selection.
In any case, thanks so much for the help so far!
Here is newest version of my function:
function ShowMap(five, _context, result) {
// clear map off page if it is present
var mapImage
mapImage = document.getElementById('google-map');
if(mapImage != null)
mapImage.remove();
const api_key = 'enter your api key here'
const url_map = 'https://maps.googleapis.com/maps/api/staticmap?center={addr}&zoom=16&size=600x200&maptype=roadmap&markers=color:red%7Clabel:A%7c{addr}&key={key}'
const url_browser_map = 'https://maps.google.com/maps/place/{addr}'
var str = five.field.Street.replaceAll(' ', '+')
var cit = five.field.City.replaceAll(' ', '+')
var sta = five.field.State
var zip = five.field.Zip
var addr = str + ',' + cit + ',' + sta + '+' + zip
var url = url_map.replaceAll('{addr}', addr).replace('{key}', api_key)
let lastField = document.getElementById('Five-Form-Field-MapHolder')
try {
lastField.insertAdjacentHTML('afterend', `<img id="google-map" src="${url}" alt="Map Image">`);
mapImage = document.getElementById('google-map');
mapImage.addEventListener("click", (e) => {
url = url_browser_map.replace('{addr}', addr);
window.open(url);
//alert("Just clicked map");
});
}
catch{
//var str = five.getMetadata('Members', 'MembersKey', 'Street') //.replaceAll(' ', '+')
//alert(str);
}
return five.success(result);
}
I tried to put something in the Catch block to lookup the values from the database table, but it also comes up with null value the first time I select from the list. Is there something you could suggest?
Also, I wanted to add functionality so if I click the map when it is displayed, it would open up the “real” map in my browser (which doesn’t require a license key). Please see my code in the Try block.
The url generated is
https://www.google.com/maps/place/2931+Circle+View+Dr,+Simi+Valley,+CA+93063
When I paste the URL into my browser, it generates the map perfectly. When I use it from my code it does not do anything. So I’m guessing the click event I put in the code isn’t working properly. Any ideas?
By the way, it seems the code would be much easier if Five allowed an image control to be put into the form at design-time rather than removing and/or adding it at run-time. Any way that functionality could be added to Five? Thanks…
Hi @RMittelman
I tried using the function you provided to test the click event and it seemed to work on my end. Can you send me your current FDF so I can have a deeper look to understand why the ‘click’ event isn’t working for your app?
Hi Ron,
We like to discuss any suggestions our users may have. Just so I get a better understanding, do you mean adding a static image while in Five and designing your form rather than adding an image in a picture field in your application?
Hi Jo-Anne,
I guess the answer to your question is having an image control that could be added to the form at design-time, then populated with the image at run-time. Consider the current code:
function ShowMap(five, _context, result) {
// clear map off page if it is present
var mapImage
mapImage = document.getElementById('google-map');
if(mapImage != null)
mapImage.remove();
const api_key = 'AIzaSyB29AasjM3N0F5MTQyxGC2M7E49ovrsJ5w'
const url_map = 'https://maps.googleapis.com/maps/api/staticmap?center={addr}&zoom=16&size=600x200&maptype=roadmap&markers=color:red%7Clabel:A%7c{addr}&key={key}'
const url_browser_map = 'https://maps.google.com/maps/place/{addr}'
var str = five.field.Street.replaceAll(' ', '+')
var cit = five.field.City.replaceAll(' ', '+')
var sta = five.field.State
var zip = five.field.Zip
var addr = str + ',' + cit + ',' + sta + '+' + zip
var url = url_map.replaceAll('{addr}', addr).replace('{key}', api_key)
let lastField = document.getElementById('Five-Form-Field-MapHolder')
try {
lastField.insertAdjacentHTML('afterend', `<img id="google-map" src="${url}" alt="Map Image">`);
mapImage = document.getElementById('google-map');
mapImage.addEventListener("click", (e) => {
url = url_browser_map.replace('{addr}', addr);
alert(url);
window.open(url);
});
}
catch{
//var str = five.getMetadata('Members', 'MembersKey', 'Street') //.replaceAll(' ', '+')
//alert(str);
}
return five.success(result);
}
In the Try block, the first statement inserts an image into the page and populates it with the map URL. The other statements in the Try block are my attempt at adding a Click event to the image (which currently doesn’t work).
If there was an image control that could be added to the page at design-time, it would probably include events that I could use to click on the map and cause it to open the address in the “real” google maps in my browser.
If this request is not warranted or important enough, no worries.
Thanks so much for the reply @Pranoy. Here is my fdf file:
BrandeisConejo-20240403-1800347984735.fdf (4.0 MB)
I hope you can see what I am doing wrong.
Please ask Jo-Anne for the password to this fdf file. If she no longer has it, please advise how I can send it to you directly so everyone else doesn’t see it.
Finally, could you please suggest code to put in the Catch block? As mentioned, the first time I select a Member from the Members form, the “five.field.whatever” variables are not yet in scope and the code causes a hard error. That’s why I put in the Try-Catch block. This problem does not happen with subsequent members chosen, only the first.
Are there other variables which may be in scope that I could use instead inside the Catch block? Maybe variables that come directly from the database? Thanks…
BrandeisConejo-20240403.fdf (4.0 MB)
Hi Ron,
Just as a precaution, please export and backup your current fdf before importing this one.
The function has been modified as follows: The On show event can be called while still rendering in the browser intially, therefore the function has now been modified to detect if the last field exists yet, if not, it delays the insertion of the map for 250 milliseconds.
The map placeholder field was moved to the bottom of the fields, and now when it inserts the map, it will replace itself, and now the event works as it is not shadowed by another control in the html, which I think is the main cause of the event not working.
Please let me know if this works better for you.