Google Map Widget not showing in Firefox

[MattiaSilvestri]

I'm using Django 4.2 (but tested also with django 5.1.5 with the same results) and the latest version of the package (0.5.1) and I'm having some issues with the reliability of the Google Map widget: in Firefox and other firefox-based browsers the widget is consistently never shown (only controls and find location field are visible, the map is just an empty space), while in other browsers is visble most of the times, even tho it's a bit unstable and sometimes I need to refresh the page to see it.
I tested also with leaflet which shows up correctly on Firefox, I didn't test with mapbox.

I tested the issue with the demo project found in this repo to rule out it could be an issue of my config, but the issue persisted.

[freshavocado7]

I’m encountering the same issue in Chrome, which is inconsistent but can be semi-reliably reproduced by throttling CPU performance using developer tools. Disabling cache seems to make the map always load.

The issue arises because a widget registers to mapWidgets.googleMapCallbacks after the Google Maps JS has already loaded and processed the widgets that were available at that time. Since there’s no handling for initializing widgets once the Google Maps JS is ready, these late-registering widgets never get initialized or rendered.

I created a temporary workaround script for now, which seems to fix the issue.

// mapwidget-workaround.js
export function initializeMapLoader() {
    const intervalTime = 2000; // retry every 2 seconds
    const maxDuration = 60; // retry for 2 minutes
    let counter = 0;

    const interval = setInterval(() => {
        if (!window.google.maps) {
            return;
        }
        counter++;

        if (window.mapWidgets?.googleMapCallbacks?.length) {
            while (window.mapWidgets.googleMapCallbacks.length > 0) {
                const widgetCallback = window.mapWidgets.googleMapCallbacks.shift();
                if (!widgetCallback.options?.mapElement?.childElementCount) {
                    console.log("django-map-widget failed to load, loading map manually.");
                    new widgetCallback.class(widgetCallback.options);
                }
            }
        }

        if (counter >= maxDuration) {
            clearInterval(interval);
        }
    }, intervalTime);
}

initializeMapLoader();

[floriangosse]

I think to get this work in this cases, we have to adjust how widgets are created or how they register to be created.

django-map-widgets/mapwidgets/templates/mapwidgets/pointfield/googlemap/interactive.html

Lines 103 to 109 in 0ae815e

	window.addEventListener("load", (event) => {
	mapWidgets.googleMapCallbacks.push({
	"class": DjangoGooglePointFieldWidget,
	"options": pointFieldWidgetOptions
	})
	// new DjangoGooglePointFieldWidget(pointFieldWidgetOptions);
	});

Instead of just registering the widgets we would have to provide a functionality that's responsible for either queueing them or creating them directly.

// ...

mapWidgets.googleMapCallbacks = [];

// NEW: Function to register or create a widget
mapWidgets.createOrRegisterGoogleMapsWidget = function createOrRegisterGoogleMapsWidget(widget) {
	if (!!window.google && !!window.google.maps)) {
		new widget.class(widget.options)
	} else {
		mapWidgets.googleMapCallbacks.push(widget);
	}
}

// MODIFIED: Callback function execute by GoogleMap JS.
function googleMapWidgetsCallback() {
    window.addEventListener("load", (event) => {
		while (mapWidgets.googleMapCallbacks.length > 0) {
			const widget = mapWidgets.googleMapCallbacks.shift();
			new widget.class(widget.options)
		}
    });
}

We can then use the "create or register" function in the widget's inline script.

<script>
	// ...

	window.addEventListener("load", (event) => {
		mapWidgets.createOrRegisterGoogleMapsWidget({
		  class: DjangoGooglePointFieldWidget,
		  options: pointFieldWidgetOptions
		})
	});
</script>

This way, all the widget that are registers after Google Maps will was loaded – and so not handled by the googleMapWidgetsCallback function – are created directly.

[im-n1]

Any advance on this?
I'm pretty sure this issue (or the quickfix provided by @floriangosse) prevents any other interaction with gmaps. If I create a new inderactive map on the same page with multiple pointers the map is not instantiated and returns weird errors. If I put that exact same code in a separated demo HTML file it runs flawlessly.