Google Maps doesn’t work

Hi @wonderfullie,

It’s hard to create a custom integration without access to a live URL. We can’t share login credentials on this forum.

Is it possible to either remove the login, so we can have a quick look at the front-end, or tell us which theme/plugin and implementation for Google Maps you’re using so we can reproduce it at our end?

regards Aert

Thanks for your answer.

I have to check with my client first to see if I can remove the restricted access.

It’s a custom theme fully developed by myself. Google Maps API file is enqueue this way :

wp_enqueue_script( 'maps-api', 'https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]');

(Obviusly, with my real api key)

At first, my function initMap() was in a global js script, but for testing I copy/paste it directly in my footer.php :

<script type="text/javascript" >
    document.addEventListener("DOMContentLoaded", e => {
        initMap();

        function initMap() {
            const center = { lat: 43.6487851, lng: 2.3435684 }

            const map = new google.maps.Map(document.getElementById("me-maps-mag"), {
                zoom: 8,
                center: center,
        });
    });
</script>

And… that’s all !

I forgot to mention that WordPress and Complianz are update.

Hi @wonderfullie,

Let’s simplify it first;

function cmplz_custom_googlemaps_script( $tags ) {
	$tags[] = array(
		'name' => 'google-maps',
		'category' => 'marketing',
		'placeholder' => 'google-maps',
		'urls' => array(
			'maps.googleapis.com/maps/api/js',
			'initMap',
		),
		'enable_placeholder' => '1',
		'placeholder_class' => 'me-gmaps',
		'enable_dependency' => '1',
		'dependency' => [
			//'wait-for-this-script' => 'script-that-should-wait'
			'initMap' => 'maps.googleapis.com',
		],
	);
	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

In your case. Google Maps is blocked prior to consent with a placeholder? But it won’t release after consent?

regards Aert

I tried this code too, but the problem is the same.

The placeholder attributes are in my element, but the image doesn’t show. With or without consent… ??

Hi @wonderfullie,

Could you post your full Google Maps implementation? I will add my own API Key and add it to a sandbox so we can have it live. It’s a struggle debugging without having the full picture:-)

Let me know! regards Aert

I just saw that I forgot some }); in the previous copy/paste but otherwise these are the only lines of code I have for my map implementation.

<script type="text/javascript" >
    document.addEventListener("DOMContentLoaded", e => {
        initMap();

        function initMap() {
            const center = { lat: 43.6487851, lng: 2.3435684 }

            const map = new google.maps.Map(document.getElementById("me-maps-mag"), {
                zoom: 8,
                center: center,
            });
        }
    });
</script>

Also, I just noticed that once I refresh my page, after consent, I get the error again in my console:

Uncaught ReferenceError: google is not defined
    initMap https://localhost:3000/magazine/ line 1 > injectedScript:19
    <anonymous> https://localhost:3000/magazine/ line 1 > injectedScript:3
    EventListener.handleEvent* https://localhost:3000/magazine/ line 1 > injectedScript:2
    cmplz_run_script https://localhost:3000/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.1.5:1
    cmplz_enable_category https://localhost:3000/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.1.5:1
    cmplz_enable_category https://localhost:3000/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.1.5:1
    cmplz_set_blocked_content_container https://localhost:3000/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.1.5:1
    conditionally_show_banner https://localhost:3000/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.1.5:1
    <anonymous> https://localhost:3000/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.1.5:1
line 1 > injectedScript

Hi @wonderfullie,

Could you change the enqueue of the API to an inline script, below the map div?

<script src="https://maps.googleapis.com/maps/api/js?key=[API]" defer </script>

This is how I can reproduce the issue explained above, make sure the class for the placeholder is a class, not an ID.

regards Aert

• This reply was modified 2 years, 7 months ago by Aert Hulsebos.

Ok so, I removed the enqueue and add the script below my map :

<div data-service="google-maps" data-category="marketing" data-placeholder-image="https://local.media.eiwa.fr/wp-content/plugins/complianz-gdpr/assets/images/placeholders/google-maps-minimal-1280x920.jpg" id="me-maps-mag" class="me-ribbon me-gmaps" data-map-lat="43.6487851" data-map-lng="2.3435684" data-map-zoom="8"></div>

<script type="text/javascript" >
    document.addEventListener("DOMContentLoaded", e => {
        initMap();

        function initMap() {
            const center = { lat: 43.6487851, lng: 2.3435684 }

            const map = new google.maps.Map(document.getElementById("me-maps-mag"), {
                zoom: 8,
                center: center,
            });
        }
    });
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=[API KEY]" defer></script>

When I inspect the code, the inline script have some data attributes :

<script data-waitfor="initMap" type="text/plain" data-service="google-maps" data-category="marketing" src="https://maps.googleapis.com/maps/api/js?key=[KEY]" defer></script>

I think it’s a good sign ?

Google maps still doesn’t work, but error in my console are different :

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

I made a search in the code and the inline script is the only match I can find for Google Maps API.

I also have this error :

Uncaught (in promise) TypeError: h is undefined
    Hea https://maps.googleapis.com/maps/api/js?key=[API KEY]:200
    promise callback*Hea/< https://maps.googleapis.com/maps/api/js?key=[API KEY]:199
    setTimeout handler*Hea https://maps.googleapis.com/maps/api/js?key=[API KEY]:199
    Load https://maps.googleapis.com/maps/api/js?key=[API KEY]:14
    <anonymous> https://maps.googleapis.com/maps/api/js?key=[API KEY]:329
    <anonymous> https://maps.googleapis.com/maps/api/js?key=[API KEY]:329
js:200:14

If I desactivate the plugin, my map works fine.

• This reply was modified 2 years, 7 months ago by Julie.

Hi @wonderfullie,

I’m sorry, but we really need to see the front-end implementation, this way we can at least see how it’s loaded and the sources. The ‘h’ is undefined is unknown to me, and not sure where to look other than the exact implementation.

I’m expecting this to be a Javascript MAP API key, not a Static Map, or an implementation whereby some layers are still loaded and are looking for the API.

Let me know if your client can release the page, or when you’re live. We can fix this pretty quickly if we have all the information,

regards Aert

Hi,

I removed the htpasswd ! Google Maps is here : https://dev.media.eiwa.fr/magazine/
Code, WordPress and all plugins are updated.

Let me know if you need something else.

And thank you again for your help !

Hi @wonderfullie,

It seems like the dependencies are switched, the initMap function is expecting Google, but the API is waiting for initMap to load… this should at least remove the error;

function cmplz_custom_googlemaps_script( $tags ) {
	$tags[] = array(
		'name' => 'google-maps',
		'category' => 'marketing',
		'placeholder' => 'google-maps',
		'urls' => array(
			'maps.googleapis.com/maps/api/js',
			'initMap',
		),
		'enable_placeholder' => '1',
		'placeholder_class' => 'my-maps-class',
		'enable_dependency' => '1',
		'dependency' => [
			//'wait-for-this-script' => 'script-that-should-wait'
			'maps.googleapis.com' => 'initMap',
		],
	);
	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

Indeed, I no longer have the error, but I still haven’t my Google Maps ??

I really don’t understand where the problem can be. Is there a specific configuration I can try maybe ?

Hi @wonderfullie,

It looks like a javascript in your theme is (also) initializing maps on DOMContentLoaded, you can double-check by switching to a standard WP theme and see if this helps.

If you can’t, you could run the event again with this function:

function cmplz_flexible_map_initDomContentLoaded() {
ob_start();
?>
<script>
    document.addEventListener("cmplz_run_after_all_scripts", cmplz_novo_fire_domContentLoadedEvent);
    function cmplz_novo_fire_domContentLoadedEvent() {
        window.document.dispatchEvent(new Event("DOMContentLoaded", {
            bubbles: true,
            cancelable: true
        }));
    }
</script>
<?php
$script = ob_get_clean();
$script = str_replace(array('<script>', '</script>'), '', $script);
wp_add_inline_script( 'cmplz-cookiebanner', $script );
}
add_action( 'wp_enqueue_scripts', 'cmplz_flexible_map_initDomContentLoaded',PHP_INT_MAX );

Did the above script work?

You can add the above code with a MU Plugin, as described here:
https://complianz.io/adding-filters-with-mu-plugins-quick-easy/

Sorry I didn’t have the time yet to check the script, but I update you tomorrow !

Thank you again for your time.