
Hello.
I’m having an issue with the google map field in a front-end form. I’ve been strugling with this for weeks. The maps are working fine in the back-end and in the front-end but it seems impossible to make it work in a front-end form.
The form allows the users to post locations but I can’t manage to make the map field work properly. While I work in local, the map is showing but the field doesn’t work and it’s impossible to select a location. And when I try online, the map is not even showing, I have a grey background and “oops! something went wrong”.
I have a javascript error saying “Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error”
It seems that the API is missing but I put it in my function.php file like this :
function my_acf_google_map_api( $api ){
$api['key'] = 'MYKEY';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
and also like this :
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=MYKEY', array(), '3.exp', false );
and it’s working fine everywhere else.
Did I miss something ?
Thank you for your help.
Ok, I finelly figured it out.
Looking at the code I noticed that in the back-end there was this script that weren’t in the front end so I added it in my form page and now the map is showing and the field is working fine :
<script type="text/javascript">
acf.fields.google_map.api = {"libraries":"places","key":"MYKEY"};
</script>
I looked at google-map.php from the plugin code and it seems that the function input_admin_footer() which is calling acf/fields/google_map/api is used only for the back-end but not it the front-end, which caused my isue.