Google Map not displaying on WP backend

• Luke03

• August 28, 2018 at 2:47 am

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

Screen-Shot-....png

Screen-Shot-....png

Screen-Shot-....png

.

• Luke03

• August 28, 2018 at 4:58 am

The site: http://porrovita.com/contact/

• mcsgroup

• September 5, 2018 at 5:29 am

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.

• carl.hartman11@gmail.com

• September 5, 2018 at 5:36 am

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!

• mcsgroup

• September 5, 2018 at 6:13 am

Uuu nice 🙂 Thank You.

• Mark Howells-Mead

• September 17, 2018 at 11:42 pm

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.

• AndyiBM

• September 19, 2018 at 4:37 am

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.”

• foyle

• September 19, 2018 at 5:16 pm

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.

• PeterHarper

• October 2, 2018 at 7:10 pm

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.

• dollhauss

• October 11, 2018 at 4:00 am

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.

• getcode

• October 12, 2018 at 11:31 pm

@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.

• lord

• December 7, 2018 at 5:21 pm

None of the suggestions above worked. We have an API, billing is setup, quota is not reached yet, etc.

Any other suggestions?

• trauma

• December 11, 2018 at 3:17 am

Hi @lord & @luke03, I am experiencing similar issues and was wondering whether you had been able to solve the issue?

• lord

• December 11, 2018 at 5:17 pm

Hi @trauma,

First of all I think we are using an old version of ACF. But I had to edit the acf-input.js (and acf-input.min.js) file, and look for sensor=false. You will find it twice, and you need to replace both with key=YOURKEYHERE.

Hope this helps!

• Mark Howells-Mead

• December 11, 2018 at 7:47 pm

@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?

• lord

• December 11, 2018 at 8:21 pm

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.

• Mark Howells-Mead

• December 11, 2018 at 8:48 pm

Ah, yes, since 2011 😂

• thethunderbird

• January 12, 2019 at 1:22 pm

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.

• inforexplore

• January 14, 2019 at 12:31 am

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.

• eaglejohn

• January 28, 2020 at 7:29 am

I’m getting the “for development purposes only” on all websites I made for clients, which are using Google Maps. Billing is set up, but no credit card is connected to it. I assume this is because one or more client websites are getting so many visitors that they’re using up all resources for the month.

“If your usage of an API reaches the equivalent of $200 USD consumption in a day (e.g. 1/30 of $200 or $6.67) and you have not moved to a Premium Plan license, that API will receive a degraded experience until the credit is reset at 12:00am PST.”

Does anyone has a workaround for this? I’m not willing to pay for this, so I guess it’s either making my clients setting up their own API, or finding an alternative Map provider?

• stefano70

• January 28, 2020 at 10:12 am

I have solved adding to my API
Geocoding API
Places API
https://console.cloud.google.com/apis/library?filter=category:maps

1- register your API
2- connect a valid card for payments
3- add Geocoding API
4- add Places API

• perrydc

• February 2, 2020 at 11:56 pm

Google Maps field worked for a while, but it is no longer appending my API key on the backend in ACF v5.8.7, in the latest version of wordpress.

I am getting the “util.js:232 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys” in the console.

I have made no change to my api key code, which is as follows (and is part of a custom plugin I wrote for my site):

/** Google Map API Key for place lookup */
function my_acf_google_map_api( $api ){
        $api['key'] = $_ENV["GOOGLEKEY"];
        return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

I am also enabled for billing and Geocoding, Geolocation, Maps Javascript API and Places API in the Google Developer Console.

Any ideas?

By the way: I really love this custom field, having tried maps in many others. Thanks for building this tool!

• eaglejohn

• February 3, 2020 at 4:41 am

I’m thinking of a way to work around this since I don’t want to pay for the usage of all my clients websites that use a map. This probably means switching over to a different map provider such as Mapbox.

I think it’s weird anyway, since this whole API and billing thing is quite complicated for just displaying a simple map on a contact page. And I’m pretty sure these maps come with a lot of cookies and other trackers from Google, so I don’t agree that we should pay for this in the first place.

Any thoughts?

• perrydc

• February 3, 2020 at 11:20 pm

For me, the issue was that wordpress (or php) no longer has access to my environment variables. So I just replaced $_ENV[“GOOGLEKEY”] with my actual google key. But this really is a bad hack because it means I can’t make my plugin repo live without exposing my key. Not sure what changed, but I’ll post back if I figure out a way to do this.

• gpspake

• March 2, 2020 at 4:08 am

Having the same issue as @perrydc

We are using the documentation recommended change and hard-coding our api key but getting the NoApiKeys error in the console.

This has been added to my theme’s functions.php file

/** Google Map API Key for place lookup */
function my_acf_google_map_api( $api ){
        $api['key'] = 'zzzzzz'; /* my key is here */
        return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');