Home Forums ACF PRO Problem with acf google map


Problem with acf google map

  • Hi, i have a problem with the map in this page:

    I see the map safely in the backend, but it does not appear correctly in the frontend.

    I use this code:
    <div class=”entry-content content”>
    $location = get_field(‘location’); ?>
    <div class=”acf-map”>
    <div class=”marker” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo $location[‘lng’]; ?>”></div>
    <?php the_content(); ?> </div>

    But don’t work… any solution?

  • Hi @mcpersonproject

    Have you included the necessary JS and CSS?
    Check the section for JS and CSS here:

  • Yes, of course I had css & js in separated files , but i don’t know why calling the js file from function is not working . What is the correct code to put in the file function ?

  • Hi,

    Okay so I’ve taken a look at your page and you have two issues.

    1. You’ve included the script two times. you should only include google maps api once through functions.php using wp_enqueue_script.
    2. In your file acf-maps.js, remove the top <script> line. That’s HTML code and it wont work (and shouldn’t be) in a js file.

    Do these and I think you’ll find it working!

  • Heya,
    Gonna jump in on this thread because I’m having the same problem. Trying to implement Googlemaps for the first time, have followed the instructions, but getting nothing on the front-end. Not sure if McPersonProject got his/her working, but here’s what I’ve got.

    Functions.php :

    wp_register_script( 'wl-googlemaps-api', '//'); 
    	wp_register_script( 'wl-googlemaps', get_template_directory_uri() . '/js/googlemaps.js'); 
    	if ( is_singular() ) {
    		wp_enqueue_script( 'wl-googlemaps-api' );
    		wp_enqueue_script( 'wl-googlemaps' );

    Have tried removing conditional, no change.

    In my template :

        $location = get_field( 'map' );
        if( !empty( $location ) ){ ?>
            <div class="acf-map">
                <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
        <?php } ?>

    I see the grey box whether or not there is a map defined.
    Have double-triple checked my variable names.
    js/googlemaps.js contains the script you provided, no html.
    I do see both scripts loading, not sure what I’m doing wrong 🙁


  • I got it, wasn’t registering my scripts properly 😉

    wp_register_script( 'wl-googlemaps-api', '//', array(), '3', true); 
    	wp_register_script( 'wl-googlemaps', get_template_directory_uri() . '/js/googlemaps.js', array('wl-googlemaps-api', 'jquery'), '0.1', true ); 

    thnx to


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

The topic ‘Problem with acf google map’ is closed to new replies.