Show map markers on a google map depending a lookup field (display type: dropdown) entries.

By: Tharusha Induwara | Asked: 05/30/2022
ForumsCategory: Code HelpShow map markers on a google map depending a lookup field (display type: dropdown) entries.
Tharusha InduwaraTharusha Induwara asked 2 years ago
I have a form that has multiple lookup fields. I want to get user-selected entries from a lookup field (set display type as a dropdown) and I created a js function with google Maps API that works based on those entries. The function is below.
document.querySelector('#field_cityname-0').addEventListener('change', function(e) {
if( this.value != '' && cities.hasOwnProperty( this.value ) ) {
markers.forEach( mkr => mkr.setMap( null ) );
let obj = cities[ this.value ];

markers.push( addmarker(, obj.lng, ) );
console.log("The city is "+this.value);

return true;
alert('Oh no ' + this.value + ' not found')
This function is located inside of the main initMap() function. The issue is, when I try to use this custom function with HTML select element, this works perfectly but when formidable forms this function does not work properly. But the user-selected values are passing only outside the initMap() function not inside it. To check that I have used this short js code.
var newElement = document.getElementById("field_cityname-0");
newElement.addEventListener('change', function(){
console.log(this.value + " item selected");
This code receives the user-selected values because it's located outside the initMap() function. When I put this code inside of the initMap() function, this won't work either. Also, I added the custom script file after the form by using the form HTML section. Is there any different way to do this?

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community