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.
