Hello All,
I have implemented a Google Map field on a custom post template. The field name is “google_map”.
I followed the instructions given on the documentation page:
https://www.advancedcustomfields.com/resources/google-map/
In my back end in the post editor, the Google Map shows perfectly and I’m able to enter an address and the marker will indicate the position on the map.
However, on the page, the map shows as a grey box. When I look at the output source code for the page, this is what appears:
<div class="acf-map">
<div class="marker" data-lat="51.305209" data-lng="-116.9751316"></div>
</div>
Please note that all other custom fields are outputting onto the page as expected.
On the post template, this is the code that I’m using:
<?php
$googlemap = get_field('google_map');
if( !empty($googlemap) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $googlemap['lat']; ?>" data-lng="<?php echo $googlemap['lng']; ?>"></div>
</div>
<?php endif; ?>
In my functions.php file, I’m using the following code:
/**
* ACF Google Map Custom Field.
*/
function my_acf_google_map_api( $api ){
$api['key'] = 'API KEY DELETED FOR SECURITY';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api')
And finally, for simplicity’s sake, I have added the default Helper Scripts to the header of the site.
Not sure what I’m missing here, can anyone enlighten me, please?
Thanks,
Peter
