This is How to Display an ACF Google Map Field in the Front-End
As a WordPress developer, you may have encountered the challenge of displaying an Advanced Custom Fields (ACF) Google Map field on the front-end of your website. While ACF provides excellent documentation on how to set up the Google Maps API, the process of actually displaying the map can be a bit tricky. In this article, we'll walk you through the necessary steps to get your ACF Google Map field up and running on the front-end.
Setting up the Google Maps API
Before you can display the map, you'll need to set up the Google Maps API. ACF provides a convenient filter that allows you to add your API key to the map field. Simply add the following code to your functions.php
file:
function my_acf_google_map_api( $api ){
$api['key'] = 'YOUR_API_KEY_HERE';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
Make sure to replace 'YOUR_API_KEY_HERE'
with your actual Google Maps API key. You can obtain an API key by following the instructions on the Google Maps Platform website.
Displaying the Map on the Front-End
Now that the Google Maps API is set up, you can start displaying the map on your website's front-end. The ACF documentation provides a basic example of how to do this, but let's dive a bit deeper and explore some additional options.
First, let's create the HTML markup for the map container:
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
</div>
</div>
In this example, we're using a parent div
with the class acf-map
to hold the map, and a child div
with the class marker
to represent the map marker. The data-lat
and data-lng
attributes of the marker div
will be populated with the latitude and longitude values from the ACF Google Map field.
Next, let's add the necessary JavaScript to display the map:
(function($) {
/*
* Map
*
* This function will render a Google Map onto the selected jQuery element
*/
function new_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker( $(this), map );
});
// center map
center_map( map );
// return
return map;
}
/*
* Add Marker
*
* This function will add a marker to the selected Google Map
*/
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map
});
// add to array
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 );
});
}
}
/*
* Center Map
*
* This function will center the map, showing all markers attached to this map
*/
function center_map( map ) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}
}
/*
* Document Ready
*
* Initializes the map when the document is ready (page has finished loading).
*/
$(document).ready(function(){
$('.acf-map').each(function(){
var map = new_map( $(this) );
});
});
})(jQuery);
This JavaScript code will create a new Google Map for each .acf-map
element on your page, and add a marker for each .marker
element within the .acf-map
container.
The new_map()
function creates the initial map, the add_marker()
function adds a marker to the map, and the center_map()
function ensures that the map is properly centered and zoomed to fit all the markers.
Finally, the document.ready()
function initializes the maps when the page has finished loading.
Customizing the Map Appearance
The default appearance of the Google Map may not always fit the design of your website. Fortunately, you can customize the map's appearance by using the styles
option in the args
object of the new_map()
function.
Here's an example of how you can apply a custom map style:
// create map
var map = new google.maps.Map( $el[0], {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP,
styles : [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#333333"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#f2f2f2"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#e9e9e9"
},
{
"lightness": 17
}
]
}
]
});
This custom style is just an example, and you can find many more custom map styles on the Google Maps Styling Wizard.
Conclusion
Displaying an ACF Google Map field on the front-end of your WordPress website can be a bit tricky, but with the right code and a little bit of customization, you can create a beautiful and functional map that enhances the user experience of your website. By following the steps outlined in this article, you should be able to get your ACF Google Map field up and running in no time.
If you're interested in improving your website's conversion rates and user experience, consider checking out Flowpoint.ai. Flowpoint uses AI-powered analytics to help you identify technical issues, UX/UI problems, and content optimization opportunities that can directly impact your website's performance
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.