ACF Google Maps field not displaying maps

If you are using the Advanced Custom Fields (ACF) plugin in WordPress and you have a Google Maps field that is not displaying the maps properly, there are a few things you can check and adjust to resolve the issue.

First, make sure you have correctly set up the Google Maps API key in your ACF settings. The API key is required for the Google Maps field to work properly. You can obtain an API key by creating a project in the Google Cloud Console and enabling the Maps JavaScript API.

Next, ensure that you have included the necessary JavaScript and CSS files for Google Maps in your theme or plugin. You can enqueue these files using the wp_enqueue_script() and wp_enqueue_style() functions respectively. Here’s an example of how you can enqueue the Google Maps API in your theme’s functions.php file:

function wpsnippets_enqueue_google_maps() {
    wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_google_maps' );

Replace YOUR_API_KEY with your actual Google Maps API key.

Finally, ensure that you have properly configured the Google Maps field in your ACF settings. When creating or editing the field, make sure you have selected the correct field type (e.g., Google Maps) and configured any necessary options (e.g., default location, zoom level, etc.).

By following these steps, you should be able to resolve the issue of the ACF Google Maps field not displaying maps properly.

Examples

Example 1: Displaying a Google Map using ACF Google Maps field

This example demonstrates how to display a Google Map using the ACF Google Maps field. The code retrieves the latitude and longitude values from the ACF field and uses them to generate a map.

<?php
$location = get_field('map_location');
$lat = $location['lat'];
$lng = $location['lng'];
?>
<div id="map"></div>
<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>},
    zoom: 8
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

In this code, we retrieve the latitude and longitude values from the ACF Google Maps field using the get_field() function. We then use these values to initialize a Google Map by creating a new google.maps.Map object and passing the latitude and longitude as the center option. Finally, we include the Google Maps API script with your API key and the initMap callback function to render the map.

Example 2: Customizing the Google Map appearance

This example shows how to customize the appearance of the Google Map generated by the ACF Google Maps field. We modify the map’s zoom level, map type, and add a marker to the specified location.

<?php
$location = get_field('map_location');
$lat = $location['lat'];
$lng = $location['lng'];
?>
<div id="map"></div>
<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>},
    zoom: 12,
    mapTypeId: 'terrain'
  });

  var marker = new google.maps.Marker({
    position: {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>},
    map: map,
    title: 'My Location'
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

In this code, we customize the Google Map by modifying the zoom option to set the initial zoom level, and the mapTypeId option to specify the map type (e.g., ‘roadmap’, ‘satellite’, ‘terrain’, ‘hybrid’). Additionally, we add a marker to the specified location using the google.maps.Marker class, providing the position and title.

Example 3: Displaying multiple markers on the Google Map

This example demonstrates how to display multiple markers on the Google Map generated by the ACF Google Maps field. We retrieve an array of locations from the ACF field and loop through them to create markers for each location.

<?php
$locations = get_field('map_locations');
?>
<div id="map"></div>
<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 8
  });

  var locations = <?php echo json_encode($locations); ?>;

  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: {lat: locations[i].lat, lng: locations[i].lng},
      map: map,
      title: locations[i].name
    });
  }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

In this code, we retrieve an array of locations from the ACF Google Maps field using the get_field() function. We then loop through the locations array and create a marker for each location using the google.maps.Marker class. Each marker is positioned using the latitude and longitude values from the location object, and we set the marker’s title to the location’s name.