Google Maps map does not work

• Rowdy

• February 13, 2025 at 12:35 pm

Hello, the Google Maps map does not work.

I am using the ACF Google Map field and filled in a valid address.

I implemented the PHP, CSS and javascript but I am receiving the following console error: “Google Maps JavaScript API error: InvalidKeyMapError”.

I implemented this code in the functions.php:

// Add Google Maps API-key
add_action(‘acf/init’, ‘my_acf_init’);
function my_acf_init()
{
acf_update_setting(‘google_api_key’, ‘XXXXXXXXX’);
}

(the XXXXXXXXX is for obscuring my real API key)

The key is not invalid, I just made a valid Google Maps JavaScript API key and I also used another valid Google Maps JavaScript API key and the browser console is just saying it’s invalid.

This is the page where I use the Google Map: https://kosskozijnen.diepcreative.nl/neem-contact-op/

Whats going on and how are we going to solve it?

• Rowdy

• February 27, 2025 at 4:45 am

I managed to fix it myself.

I did entered the Google Maps API key through:

// Method 2: Setting.
function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');

But I notice I forgot to put it in the javascript code aswel:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Function.prototype"></script>
<script type="text/javascript">

So I did that and now it worked.