Map marker hides in top left of the wrapper/container.

[tnchuntic]

I am trying to display map inside modal and seems it displays the map on the top left of the modal content wrapper.

Not really sure why, I have checked the console and doesn't have any error related to the map.

Hope to hear from your end. Thanks

See screenshots:

Initial render map aligned to top left.

I manually drag the map to center

[tnchuntic]

Also I've notice this error on the chrome console dev tool "DevTools failed to parse SourceMap: https://www.mydomain.com.au/wp-content/plugins/acf-field-openstreetmap/assets/js/Control.Geocoder.js.map"

see screenshot https://snag.gy/WA9QTF.jpg

[tnchuntic]

Is there a way to reload already initialise map using the dom element selector? I have check again the modal with map it seems that its displaying but not centering because of the modal is not yet available when map was created.

I have tried tracing the js code "acf-osm-frontend.js" and I couldn't find a function to reload the map. :) hope you can point me in the right direction on where I can override/extend for me to reload the map when modal is shown.

Thanks

[mcguffin]

Calling invalidateSize() on the leaflet object might help in your case.
@see (https://leafletjs.com/reference-1.4.0.html#map-invalidatesize)

If the map was rendered using the_field() you can force-reload the tiles like this:

var $mapEl = jQuery('.leaflet-map').first(); // or any other selector... 
var leafletObject = $mapEl.data('acfOsmMap');
leafletObject.invalidateSize(); // redraw map