Hello everyone
I purchased ACF Pro and earlier on I tried displaying Google Maps on each single post page after taking steps described at https://www.advancedcustomfields.com/resources/google-map/.
I made sure no error was returned on the Console Tab of Chrome and entered the correct field name into the code below also. However, no part of the HTML in the code below would show up in the source, hence no display of Google Maps:
<?php
$location = get_field(‘google-maps’);
if( !empty($location) ):
?>
<div class=”acf-map”>
<div class=”marker” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo
$location[‘lng’]; ?>”></div>
</div>
<?php endif; ?>
Could someone please tell me if you successfully showed the maps following the same steps and if you had to modify any part steps?
Thank you in advance,
Ead
This reply has been marked as private.
@eadwig Possible Solution :
Step 1 : functions.php
/**
* Google Maps
*/
function my_acf_init() {
acf_update_setting(‘show_admin’, false);
acf_update_setting(‘google_api_key’, ‘api_key’);
}
add_action(‘acf/init’, ‘my_acf_init’);
Step 2 : Please check this code : https://jsfiddle.net/y6wbbdy3/
Reference https://www.advancedcustomfields.com/resources/google-map/ (Helpers)
Step 3 : Add Custom CSS
// map
.acf-map {
width: 100%;
height: 313px;
}
/* fixes potential theme css conflict */
.acf-map img {
max-width: inherit !important;
}
PD : Don´t forget insert your API KEy (Google Maps)
Hello loorlab
Thanks for the response.
I inserted all the code recommended above into my php files and verified that the API key entered was correct, but then again the map is a gray box.
ACF Customer Support recommened inserting the code as shown below,
but this did not resolve the problem:
global $post;
$location = get_field(‘map’, $post->ID);
One thing I noticed is that executing the code as shown below only returns ‘Array’…
Does this indicate anything?:
echo get_field(‘map’, $post->ID);
I worked out the code to get the Google Maps to show up on a single custom template page using ACF shown as follows:
<style type=”text/css”>
#map * {
overflow:visible;
height: 100%;
}
#map .gmnoprint .gm-style-mtc{
height: auto;
}
</style>
<div id=”map”></div>
<script>
<?php
$location = get_field(‘map’);
if( !empty($location) ):
?>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: {lat: <?php echo $location[‘lat’]; ?>, lng: <?php echo $location[‘lng’]; ?>},
zoom: 18
});
}
<?php endif; ?>
</script>
If you want to display the map on a post listing page outside its loops, you may have to call the following upon defining $location:
global $post;
$location = get_field(‘map’, $post->ID);
For some reason, the trying the solution given at https://www.advancedcustomfields.com/resources/google-map/ only showed a gray box, which might be because of incompatibility with updated Google Maps API.
bumping this topic for ACF experts. multiple people posting about generally the same thing.
