[Python] Javascript error in python code: "Uncaught ReferenceError: map is not defined"

I've been desiging a window that shows an interactable map using PyQt5's QtWebEngineWidgets. Here's a preview of what I've been working on: Window with interactive map

One of the things I've been trying to intergrate is when a user chooses any of the PO sample radio buttons, the map will change location towards where the sample is located. However, whenever I run the code, it gives me this error when the window appears:

js: Uncaught ReferenceError: map is not defined

Additionally, whenever I click any of the radiobuttons, it also gives me this:

js: Map instance not initialized.

I've been trying to use javascript to intergrate button functionality inside the map, where clicking on these buttons will show a message through the use of both Javascript and Python. The code is pretty long, so here are snippets of the code where the issues originate, both of which take place inside the UI_MainWindow() class:

def load_map(self):
import folium
import os

center_lat, center_lng = 18.45, -66.08

self.map_obj = folium.Map(
location=[center_lat, center_lng],
zoom_start=15, # Adjust zoom level
min_zoom=14,
max_zoom=17,
control_scale=True
)

html_button = """
<button onclick="alert('PO1 Button Clicked!')" style="border-radius: 8px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none;">
PO1
</button>
"""
folium.Marker([18.45, -66.08], icon=folium.DivIcon(html=html_button)).add_to(self.map_obj)

html_button2 = """
<button onclick="alert('PO2 Button Clicked!')" style="border-radius: 8px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none;">
PO2
</button>
"""
folium.Marker([18.46, -66.07], icon=folium.DivIcon(html=html_button2)).add_to(self.map_obj)

move_js = """
<script>
var map_instance;

function initializeMap() {
// Assign the Leaflet map instance created by Folium to the global variable
map_instance = map;
}

function moveToLocation(lat, lng) {
if (map_instance) {
map_instance.flyTo([lat, lng], 16);
} else {
console.error("Map instance not initialized.");
}
}
</script>
"""
self.map_obj.get_root().html.add_child(folium.Element(move_js))

# Ensure the map instance is assigned after the DOM is fully loaded
init_map_js = """
<script>
document.addEventListener("DOMContentLoaded", function(event) {
initializeMap(); // Initialize the map instance
});
</script>
"""
self.map_obj.get_root().html.add_child(folium.Element(init_map_js))
]
map_path = os.path.join(os.getcwd(), "map_buttons.html")
self.map_obj.save(map_path)

self.webView.setUrl(QtCore.QUrl.fromLocalFile(map_path))

def update_label(self, radio_button):
if radio_button.isChecked():
self.sample_selected = True
self.label_8.setText("MUESTRA SELECCIONADA: " + radio_button.text())

# Enable buttons
self.btn1.setEnabled(True)
self.btn2.setEnabled(True)
self.btn3.setEnabled(True)
self.btn4.setEnabled(True)

# Move the map based on the selected radio button
if radio_button == self.radio:
# PO1 selected, move to its location
self.webView.page().runJavaScript("moveToLocation(18.45, -66.08);")
elif radio_button == self.radio2:
# PO2 selected, move to its location
self.webView.page().runJavaScript("moveToLocation(18.46, -66.07);")
# same for other buttons

Continue reading...