Reply To: Google Maps field needs setting to add API key

• Joachim

• June 27, 2016 at 8:05 pm

@gab1982 the temporary fix is only intended for the WordPress backend because I suppose everyone has his own way of implementing the Google Map in the frontend.

If you used the embed code mentioned on the official ACF Google Maps page (https://www.advancedcustomfields.com/resources/google-map/), you just have to change the script-tag:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

becomes

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=XXX"></script>

XXX being your own Google API key

A better option to include the JS-file in your frontend is by registering & enqueueing the script, you can do this by placing the following code inside your functions.php file, or have a look at a specific tutorial like https://premium.wpmudev.org/blog/adding-scripts-and-styles-wordpress-enqueueing/ (just the first that came up in Google search, I have nothing to do with wpmudev)

/**
 * enqueue scripts and styles 
 *
 */

function nr_load_scripts() {
		
	wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXX',null,null,true);  
	wp_enqueue_script('googlemaps');
		
}
add_action( 'wp_enqueue_scripts', 'nr_load_scripts' );

– again, replace XXX with your own Google API key
– change the true to false if you want to load the script in de header of the page instead of at the bottom.