I’m trying to use Google Maps in a Custom Post Type.
- I followed the instructions Advanced Custom Fields – Resources – Google – Map
- I followed this ACF Google Maps Tutorial.
- css is placed correctly.
- I have a Google Maps API Key placed properly in my functions.php
- The JavaScript is placed and enqueued correctly, my console does not show any errors.
The Google Map shows perfectly fine in the WP Admin, but on the front end there is nothing but a border around a box with nothing inside of it.
I don’t know what I’m missing. Any help is appreciated.
same issue here. A few people have posted about it. Not intuitive even with the existing documentation.
I’m just getting the default Melbourne address on the front end despite the address being populated on the back end. Using a repeater google map field. Have read and tried everything mentioned on here and elsewhere. My page isn’t calling the maps api multiple times, etc etc.
I am experiencing similar issues. there is no error on the front end but no map either. Backend shows the map nicely. Anyone had a fix for this?
Can you provide your source code, so we can see and check what was the issue?
Thanks.
+ 1 same issue here. I used the same code than in your example, it shows correct on the back end but nothing on the front end. There are no js errors.
Can you check if the array of this code display value:
$location = get_field('location');
If yes there’s value,
could you check the external link from google if it is present in the footer:
https://maps.googleapis.com/maps/api/js?key=YOUR-KEY
If yes, this link is present,
please also make sure the javascript acf map and maps.googleapis.com can be seen at your inspect element – Network tab.
Previously i have this issue, but when I check these steps. It display correctly.
var googleMap = ‘<div id=”map”></div>’;
// Calls the initializeMap() function when the page loads
window.addEventListener(‘load’, initializeMap);
// Vanilla JS way to listen for resizing of the window
// and adjust map bounds
window.addEventListener(‘resize’, function(e) {
// Make sure the map bounds get updated on page resize
map.fitBounds(mapBounds);
});
// show Map
$(“#mapDiv”).append(googleMap);
Hope this helped you out.
After sifting through pages, here’s the solution to the empty rendered grey box. Credit goes to paulmiller3000.
All you have to do is move this portion of the helper code to the bottom of the page.
<script type="text/javascript">
(function( $ ) {
/**
* initMap
*
* Renders a Google Map onto the selected jQuery element
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @return object The map instance.
*/
function initMap( $el ) {
// Find marker elements within map.
var $markers = $el.find('.marker');
// Create gerenic map.
var mapArgs = {
zoom : $el.data('zoom') || 16,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( $el[0], mapArgs );
// Add markers.
map.markers = [];
$markers.each(function(){
initMarker( $(this), map );
});
// Center map based on markers.
centerMap( map );
// Return map instance.
return map;
}
/**
* initMarker
*
* Creates a marker for the given jQuery element and map.
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @param object The map instance.
* @return object The marker instance.
*/
function initMarker( $marker, map ) {
// Get position from marker.
var lat = $marker.data('lat');
var lng = $marker.data('lng');
var latLng = {
lat: parseFloat( lat ),
lng: parseFloat( lng )
};
// Create marker instance.
var marker = new google.maps.Marker({
position : latLng,
map: map
});
// Append to reference for later use.
map.markers.push( marker );
// If marker contains HTML, add it to an infoWindow.
if( $marker.html() ){
// Create info window.
var infowindow = new google.maps.InfoWindow({
content: $marker.html()
});
// Show info window when marker is clicked.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
/**
* centerMap
*
* Centers the map showing all markers in view.
*
* @date 22/10/19
* @since 5.8.6
*
* @param object The map instance.
* @return void
*/
function centerMap( map ) {
// Create map boundaries from all map markers.
var bounds = new google.maps.LatLngBounds();
map.markers.forEach(function( marker ){
bounds.extend({
lat: marker.position.lat(),
lng: marker.position.lng()
});
});
// Case: Single marker.
if( map.markers.length == 1 ){
map.setCenter( bounds.getCenter() );
// Case: Multiple markers.
} else{
map.fitBounds( bounds );
}
}
// Render maps on page load.
$(document).ready(function(){
$('.acf-map').each(function(){
var map = initMap( $(this) );
});
});
})(jQuery);
</script>
More specifically, put it after the:
$location = get_field('map');
if( $location ): ?>
<div class="acf-map" data-zoom="15">
<div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
</div>
<?php endif; ?>
Hope this saves people time looking to resolve this.
map.png.png
