Home › Forums › ACF PRO › Google Maps do not display › Reply To: Google Maps do not display
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.
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!
ACF’s Repeater field is a versatile solution for repeating content in #WordPress.
— Advanced Custom Fields (@wp_acf) December 29, 2022
What’s your favorite use case for the Repeater field?
What’s the weirdest thing you’ve ever used it for?
Let us know!👇
© 2023 Advanced Custom Fields.
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.