Support

Account

Home Forums Front-end Issues Google Maps Field Frontend Issue

Solving

Google Maps Field Frontend Issue

  • Hi,

    I’ve come back to a website that I’ve been working on for over a year and it appears that the Google Maps updates that came out last year have caused my maps to stop working on my site using my ACF Pro field.

    I’ve read several threads on here about how to get them working and have got them showing up in the WP admin but are having no luck on the front end. Looking the Chrome developer console it’s down to the API key being missing even though I’ve added the required code to my theme’s functions.php file but it has no effect:

    function my_acf_init() {
    	
    	acf_update_setting('google_api_key', 'xxx');
    }
    
    add_action('acf/init', 'my_acf_init');

    Do you know what I’m doing wrong? The map loads for second then I guess the API authentication kicks in and I then get an “Oops Something Went Wrong” error.

    Thanks in advance,

    James

  • Hi @jmdesignsolutions

    It may be necessary to modify the map JS that you are loading for the page template and pass the new API key via this script:

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script type="text/javascript">
    (function($) {
  • Hi James,

    Thanks for the reply, sorry I’m a little confused where I would add this. Does it need to go in the functions file? At the moment I have the following code:

    function my_theme_add_scripts() {
    	wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
    	wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );   
    }
     
    add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

    I’ve tried modifying this to the following but it doesn’t seem to have any effect:

    function my_theme_add_scripts() {
    	wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
    	wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE', array(), '3', true );    
    	wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );   
    }
     
    add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

    Thanks,

    James

  • Hi @jmdesignsolutions

    Please keep in mind that you only need to add the Google Maps script once. So it should be something like this:

    function my_theme_add_scripts() {
        wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE', array(), '3', true );    
        wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );   
    }
     
    add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

    Please don’t forget to replace the “KEYGOESHERE” text with your Google Maps API key.

    If the issue persists, could you please check the console tab of your developer tools for any JavaScript error messages on the page?

    Thanks 🙂

  • Hi James,

    That’s great thanks, replaced my original function with the one above and it works perfectly.

    Many thanks for your help.

    James

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.