[Problem] Map is a gray rectangle

HI there,

Right now I’m seeing that the site can’t connect to the database correctly.

But generally, the grey background means you don’t have a Maps API key configured. Here’s our docs on doing that:
https://wordimpress.com/documentation/maps-builder-pro/creating-maps-api-key/

Review that (after you get your database worked out!) and let me know if you have other questions.

Thanks!

I see. The issue is that the map is hidden on page load, so the JS doesn’t have a chance to “draw” the map. You’ll need to re-trigger our JS when that tab is clicked.

Add this snippet at the bottom of your theme’s functions.php file, and you should be all set:

add_action('gmb_public_view_bottom', 'wordimpress_redraw_gmb_tab_script');

function wordimpress_redraw_gmb_tab_script() { ?>
    <script>
    jQuery(document).ready(function ($ ) {
		$('li.mkdf-tour-nav-item a').one('click', function (e) {
			var panel_id = $(this).attr('href');
			setTimeout(function () {
				var panel = $(panel_id).get(0);
				MapsBuilder.load_hidden_map(panel);
			}, 100, panel_id);
		});
	});
    </script>
<?php
}

Thanks!

Glad to hear, happy to help.

If you’re enjoying Maps Builder and appreciate our support, we’d love a kind review from you here:
https://wordpress.org/support/plugin/google-maps-builder/reviews/