Home › Forums › ACF PRO › Google Maps Only Displaying Grey Box › Reply To: Google Maps Only Displaying Grey Box
Finally got this one solved. In my case, I was enhancing the WooCommerce Quick View Pro plugin. That plugin does not create a modal until AFTER the DOM has been rendered. However, 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.
I solved this by including the jQuery, e.g., after the ACF div containers were rendered. Here’s an example:
/*
* Display a map (saved from Advanced Custom Fields) in Quick View Pro modal
* Documentation: https://battlestardigital.com/adding-advanced-custom-fields-google-maps-to-woocommerce-quick-view-pro/
* HTML Source: https://www.advancedcustomfields.com/resources/google-map/
*/
private function bsd_qvp_display_map( $map) {
if ( $map ) {
?>
<div id="map" class="acf-map">
<div class="marker" data-lat="<?php echo esc_attr($map['lat']); ?>" data-lng="<?php echo esc_attr($map['lng']); ?>"></div>
</div>
<script>
<?php
include_once get_stylesheet_directory() . '/bsd-maps.js'; // Assumes you've made a copy of the ACF JavaScript field and placed it in your child theme folder
//include_once dirname( BSD_WC_QVP_PATH ) . '/assets/bsd-maps.js'; // Use this syntax if you're storing the file elsewhere, e.g., your plugin
?>
</script>
<?php
}
}
P.S. The link to my test site changed to https://wp.battlestardigital.com/quick-view-pro-test-page/
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.