Radius Circle on ACF Map

• revive

• March 9, 2025 at 7:31 pm

I’m running into an issue of where to put some specific code..
As you can see from the code I am entering the address (in admin) for the map and a radius, for the circle. I have NOT added the value of the radius to the circle function yet..

Here is what I’m using for the map:

 <?php 
 $location = get_sub_field('map');
 $radius = get_sub_field('radius');
 var_dump($location);
 echo $radius; 

 if( $location ): ?>
  <section class="wrapper bg-light">
    <div class="map">
      <div class="acf-map" data-zoom="16">
          <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
      </div>
    </div>
    <!-- /.map -->
  </section>
  <!-- /section -->

  <style type="text/css">
  .acf-map {
      width: 100%;
      height: 500px;
      margin: 0;
  }

  .acf-map img {
     max-width: inherit !important;
  }
  </style>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfQsg-s2IP33YI4cXaUrGrJ4gGl-NAyaY&callback=Function.prototype"></script>
  <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>

<?php endif; ?>

And another forum post said to put this code in there:

        var cityCircle = new google.maps.Circle({
            strokeColor: "#9BCCDF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#9BCCDF",
            fillOpacity: 0.35,
            map: map,
            center: latlng,
            radius: 40233.6,
            draggable: false
        });

But any where I add it, it doesn’t work.
Any help would be appreciated.

• revive

• March 9, 2025 at 8:01 pm

For those struggling add a Circle (Radius, for a service or delivery area, etc.).. try the code below. This will accept an address for the map, the radius for the circle and the zoom level for the map, as well as the stroke and fill colors for the circle itself.

NOTE: I have these fields created in a Flexible Content Field Layout, you would use get_field, instead of get_sub_field if you just add these fields to a page..

Here are the fields I’m using, with the Name and Type of Field:
Map / map field
Radius / Text
Zoom / Text
Stroke Color / Color Picker
Fill Color / Color Picker

Here is the code in the flexible content include (you could add this directly to the page template if needed)

 <?php 
 $location = get_sub_field('map');
 $radius = (get_sub_field('radius') > 0) ? get_sub_field('radius') * '1609.344' : "";
 $zoom = get_sub_field('zoom');
 $strokeColor = get_sub_field('stroke_color');
 $fillColor = get_sub_field('fill_color');

 if( $location ): ?>
  <section class="wrapper bg-light">
    <div class="map">
      <div class="acf-map" data-zoom="<?php echo $zoom; ?>">
          <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
      </div>
    </div>
    <!-- /.map -->
  </section>
  <!-- /section -->

  <style type="text/css">
  .acf-map {
      width: 100%;
      height: 500px;
      margin: 0;
  }

  .acf-map img {
     max-width: inherit !important;
  }
  </style>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfQsg-s2IP33YI4cXaUrGrJ4gGl-NAyaY&callback=Function.prototype"></script>
  <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 );
            });
        }
        <?php if($radius > '0'): ?>

          var circle = new google.maps.Circle({
              strokeColor: "<?php echo $strokeColor; ?>",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "<?php echo $fillColor; ?>",
              fillOpacity: 0.35,
              map: map,
              center: latLng,
              radius: <?php echo $radius; ?>,
              draggable: false
          });

        <?php endif; ?>

    }

    /**
     * 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>

<?php endif; ?>