Introduction:Enhancing Google Map Markers

In this blog post, we’ll explore a practical scenario where we not only display Google Map markers using the ACF Google Map field but also enrich them with additional information such as post title and excerpt. By combining the power of ACF and Google Maps API, we can create a more informative and engaging mapping experience for users.

Getting Started:

Ensure you have the ACF plugin installed and activated on your WordPress site, and create a custom field group with a Google Map field. Additionally, have the Google Maps API key ready, as we’ll be using it to display the map.

1. Modify ACF Field Group: Open your ACF field group and ensure you have the necessary fields, including the Google Map field, post title, and post excerpt.

   add_action('acf/init', 'my_acf_init');
   function my_acf_init() {
      acf_add_local_field_group(array(
         // Field group settings...
         'fields' => array(
            array(
               'key' => 'field_location',
               'label' => 'Location',
               'name' => 'location',
               'type' => 'google_map',
               // Additional settings...
            ),
            // Other fields...
         ),
      ));
   }

Displaying Google Map with Markers:

Now, let’s create a template file or modify an existing one to output the Google Map with markers, including post title and excerpt.

2. Outputting Google Map with Markers:

   <?php
   // Get the current post ID
   $post_id = get_the_ID();

   // Retrieve location data from the ACF Google Map field
   $location = get_field('location', $post_id);

   // Output Google Map with markers
   ?>
   <div id="map-container">
      <div id="map" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
   </div>

Don’t forget to include the Google Maps API script as mentioned in the previous blog post.

3. Enhancing Markers with Post Title and Excerpt:

   <script>
      function initMap() {
         var mapElement = document.getElementById('map');
         var lat = parseFloat(mapElement.getAttribute('data-lat'));
         var lng = parseFloat(mapElement.getAttribute('data-lng'));

         var map = new google.maps.Map(mapElement, {
            center: { lat: lat, lng: lng },
            zoom: 15
         });

         var marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map,
            title: '<?php echo esc_js(get_the_title($post_id)); ?>', // Post title as marker title
         });

         // Info window with post excerpt
         var infowindow = new google.maps.InfoWindow({
            content: '<h3><?php echo esc_js(get_the_title($post_id)); ?></h3><p><?php echo esc_js(get_the_excerpt($post_id)); ?></p>'
         });

         // Open info window on marker click
         marker.addListener('click', function() {
            infowindow.open(map, marker);
         });
      }
   </script>

Conclusion:Enhancing Google Map Markers

By following these steps and incorporating the provided code snippets, you can elevate your Google Map markers by adding post title and excerpt information. This not only enhances the visual representation of locations but also provides users with valuable context about each marker. Customize the code further to suit your specific needs and create a truly engaging mapping experience on your WordPress site.

If you need help integrating Google maps with your site give me a shout.

Photo by Andrew Neel on Unsplash