Home › Forums › Backend Issues (wp-admin) › Google Map not displaying on WP backend
In our attempt to add multiple markers to the Google Map Custom Field we have run into an issue of the map not displaying on the WP backend. As well as the frontend map not pinpointing the added locations.
We followed all of the directions on the ACF page for Google Maps and even tried a solution from the Digital Noir site. But no luck.
No errors in the console on the front end but the Google Maps API console error shows on the WP backend even though we’ve included the WP backend under Google API’s credentials HTTP referrers.
*mysite.com/*
http://mysite.com/wp-admin/*
https://mysite.com/wp-admin/*
http://mysite.com/wp-admin/post.php?post=17&action=edit
Page template file:
<?php if( have_rows('locations') ): ?>
<div class="acf-map">
<?php while ( have_rows('locations') ) : the_row();
$location = get_sub_field('location');
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><?php the_sub_field('title'); ?></h4>
<p class="address"><?php echo $location['address']; ?></p>
<p><?php the_sub_field('description'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
functions.php:
add_action('wp_enqueue_scripts', 'mygoogleapi_enqueue_scripts');
function mygoogleapi_enqueue_scripts()
{
wp_enqueue_script('js-google', '//maps.googleapis.com/maps/api/js?key=MY_API_KEY', null, null);
}
** Map.js is attached.
I believe the main problem is when we add a location on the WP Admin page and save the address goes away. I’ve seen this on other parts of the site as well. Hmm???
If you see anything slightly wrong with the code we’ve implemented please let us know.
Thanks!
-Luke
I have the same issue , is there any workaround with this? I cant add any locations. My website URL is in the Google API as enabled.
Not sure about a workaround. I just went a totally different way using Google My Maps, since no one was chiming in here.
Hope that works out for you!
Same here – WordPress 4.9.8 and ACF Pro 5.7.6. It looks as though the key (added according to the docs for acf_update_setting
) isn’t being appended to the request to the Google Maps API. This has worked seamlessly for quite a while and appears to have only stopped working recently. Funnily enough, the address search function works and the value of the field is saved. It’s just that the map itself is covered by a semi-transparent dark overlay.
Hi – I’m also having the same issue as Luke: the map displays perfectly on the web page (front end), but it will only display the location that I have configured in the Custom Fields set-up screen. I can click within the ‘map’ area to move the pointer (which, again, is good), but when I try to enter an address or postal code into the Address bar, I get the error pop-up “This page can’t load Google Maps correctly.”
I encountered the very same issue. After a few hours, I decided to try to use the second function mentioned on https://www.advancedcustomfields.com/resources/google-map/ (the one which is not suggested for ACFPRO useres):
function my_acf_google_map_api( $api ){
$api['key'] = 'xxx';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
… and it works. I have no idea if (with future updates) this may result in issues on the long run, but nevertheless, it’s a solution for now.
Google recently implemented new billing rules for Google Maps.
In order to display maps on a website, you need to not only have a correctly configured API key, but the account used at Google also needs a billing account set up with a card assigned for any billing.
This has been announced in a few places, and if you click through the links provided on the greyed out maps and/or look at the details in the console you’ll see more descriptive warnings/explanations.
See: https://cloud.google.com/maps-platform/user-guide/pricing-changes/
In summary: the free tier has gone. You get $200 credit. Any usage above that is billed, so you need to add a billing account/card.
I’m getting the same error.
“This page can’t load Google Maps correctly”
https://cl.ly/db57f9276f93
And then when I add either of the code snippets into functions.php I just get a Javascript error “Sorry! Something went wrong!”:
https://cl.ly/09942378f46e
The front end of the site says:
“Google Maps Platform rejected your request. Invalid request. Invalid ‘q’ parameter.”
Using Beaver Themer.
I’ve tried every solution in the forums but nothing is working.
Site was fine a few weeks ago – it’s a directory site – all old maps still work fine.
I just can’t add any new ones.
@dollhauss
Have you activated the google api?
https://developers.google.com/maps/documentation/javascript/get-api-key
Create a api key, add your page url http://domain.com/* and https://domain.com/*
Activate this api in the library:
Geocoding, Geolocation, Maps javascript, and Places api.
This should solve your problem.
None of the suggestions above worked. We have an API, billing is setup, quota is not reached yet, etc.
Any other suggestions?
@trauma @lord You can use sensor=false
and key=YOURKEYHERE
concurrently – you don’t need to replace one with the other. Also, changes to files you edit directly in the plugin will be lost next time you update, so it’s not recommended. Which version of ACF are you using?
Hi Mark, that’s true. But I read that sensor is not required anymore or something like that.
Anyway, I’m also aware that any changes will be overwritten when there’s an update. I suggest that as a temporary fix only for those who may also be using an older version.
We are using 5.3.8.1
Cheers.
I ran into the same issue but was able to solve it by enabling the “Places API for Web” in addition to the “Maps JavaScript API”. I believe the error is happening because the Places API does the autocomplete for the address field while the Maps JavaScript API does the rendering of the map displayed below it.
Hello friends! I have solved my problem. You need activate your api keys for Google Maps on Google Cloud Plataform: https://cloud.google.com/maps-platform/user-guide/pricing-changes/?apis=maps,routes,places
After activate will be generate a API Key, and you can use it on the ACF Pro. I solved my problem this way.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
Very excited about ACF 5.7.11! We finally fixed our issues with persistent object caching! Scheduled for release on Monday 🙌 #memcached @wpengine @SiteGround #wordpress #cache
— Advanced Custom Fields (@wp_acf) February 8, 2019
© 2019 Advanced Custom Fields. Subscribe
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.