One of the (many, many) cool things about Elliot Condon’s Advanced Custom Fields (ACF) plugin is the ability to add Google Maps to a custom field. Implementation is fairly straightforward, once you pick up your Google developer’s API key.
Just One Small Problem
We ran into a problem recently when trying to display the contents of a custom Google Maps field in a modal.
Now, there is a documented issue where Google Maps won’t display in a modal after it’s been revealed using .show. There are potential solutions available (here and here, for example). HOWEVER, those apply to modals that are created when the DOM is rendered and remain hidden until a show action is executed.
Unfortunately, those solutions don’t work for the WooCommerce Quick View Pro plugin. While this plugin is awesome, it doesn’t create the modal until an action is fired, such as when a user clicks a button. However, ACF relies on the modal having already been created.
So, when you add Google Maps using Advanced Custom Fields, you get a box with a grey border… and no map:
I banged my head against the wall repeatedly over the course of four days trying to figure this one out!
In the end, as is so often the case, the fix ended up being pretty easy.
The problem is the ACF jQuery file is loaded in the DOM before the modal is created. The solution for Quick View Pro is to load that jQuery after we generate the HTML.
Let’s assume you’re using a function to generate that HTML. Modify your function to call the jQuery file:
This function assumes you’ve named the ACF jQuery file “bsd-maps.js.” Substitute your own name here.
Now, upload your functions.php file, refresh your page, and click the View Details link. Your map should now be displayed!
If you ran into a similar problem with the Quick View Pro plugin, this should work for you.