Problem with acf google map

• McPersonProject

• June 24, 2015 at 12:32 am

Hi, i have a problem with the map in this page: moval.areamc.it/contatti

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”>
<?php
$location = get_field(‘location’); ?>
<div class=”acf-map”>
<div class=”marker” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo $location[‘lng’]; ?>”></div>
</div>
<?php the_content(); ?> </div>

But don’t work… any solution?

• Jonathan

• June 24, 2015 at 2:36 am

Hi @mcpersonproject

Have you included the necessary JS and CSS?
Check the section for JS and CSS here: http://www.advancedcustomfields.com/resources/google-map/

• McPersonProject

• June 24, 2015 at 3:42 am

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 ?

• Jonathan

• June 24, 2015 at 5:50 am

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!

• jennybeaumont

• August 26, 2015 at 8:55 pm

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', '//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'); 
	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 :

<?php 

    $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>
        </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 🙁

thnx!
-jennyb

• jennybeaumont

• August 26, 2015 at 9:45 pm

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

wp_register_script( 'wl-googlemaps-api', '//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', 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 http://www.aliciaramirez.com/2015/02/advanced-custom-fields-google-maps-tutorial/

best,
-jennyb