The ACF (Advanced Custom Fields) plugin provides a location field type that allows users to select a location on a map. However, sometimes the map may not be displayed properly on the front-end. To fix this issue, you can use the following code snippet:
function wpsnippets_acf_google_maps_api_key() {
// Replace 'YOUR_API_KEY' with your actual Google Maps API key
return 'YOUR_API_KEY';
}
add_filter('acf/fields/google_map/api', 'wpsnippets_acf_google_maps_api_key');
This code snippet adds a filter to the acf/fields/google_map/api hook and sets the Google Maps API key. You need to replace 'YOUR_API_KEY' with your actual Google Maps API key.
By adding this code to your theme’s functions.php file or a custom plugin, the ACF location field should now display the map correctly on the front-end.
This code snippet is useful when you want to display the map in the ACF location field but it is not being shown. By setting the Google Maps API key, you ensure that the necessary scripts and resources are loaded properly, allowing the map to be displayed.
Examples
Example 1: Displaying a static map image using ACF location field
This use case demonstrates how to use the ACF location field to store latitude and longitude values and display a static map image based on those coordinates.
<?php
$location = get_field('location');
$lat = $location['lat'];
$lng = $location['lng'];
$map_url = "https://maps.googleapis.com/maps/api/staticmap?center={$lat},{$lng}&zoom=15&size=400x300&markers=color:red%7C{$lat},{$lng}&key=YOUR_API_KEY";
?>
<img src="<?php echo esc_url($map_url); ?>" alt="Map">
In this code example, we retrieve the latitude and longitude values from the ACF location field using get_field(). Then, we construct the URL for the static map image using the retrieved coordinates. Finally, we display the map image using an <img> tag.
Example 2: Displaying an interactive map using ACF location field
This use case demonstrates how to use the ACF location field to display an interactive map using the Google Maps JavaScript API.
<?php
$location = get_field('location');
$lat = $location['lat'];
$lng = $location['lng'];
?>
<div id="map"></div>
<script>
function initMap() {
var location = { lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?> };
var map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 15
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
In this code example, we retrieve the latitude and longitude values from the ACF location field using get_field(). We then initialize a map using the Google Maps JavaScript API, centered on the retrieved coordinates. A marker is added to the map to indicate the location.
Example 3: Displaying a map with custom styling using ACF location field
This use case demonstrates how to use the ACF location field to display a map with custom styling using the Google Maps JavaScript API.
<?php
$location = get_field('location');
$lat = $location['lat'];
$lng = $location['lng'];
?>
<div id="map"></div>
<script>
function initMap() {
var location = { lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?> };
var map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 15,
styles: [
{
featureType: 'water',
elementType: 'geometry',
stylers: [{ color: '#000000' }]
},
{
featureType: 'landscape',
elementType: 'geometry',
stylers: [{ color: '#ffffff' }]
},
// Add more custom styles here
]
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
In this code example, we retrieve the latitude and longitude values from the ACF location field using get_field(). We then initialize a map using the Google Maps JavaScript API, centered on the retrieved coordinates. Custom map styles are applied to the map using the styles option, allowing for a unique visual representation of the map.