Adding Custom Markers to Map Field in Frontend Form

• dtx211

• March 12, 2017 at 6:56 am

I’m building a site that lets users post to the site via frontend forms to create listings. Part of this is choosing their locations, so for this I’m using the Google Maps field in my forms.

In displaying the posted listings I load the Google Maps in via the_field(), here it is very easy to change the look and feel of those maps.

But in the form itself this is a bit harder. I’m trying to add custom markers to the form, but am not getting anywhere.

I already managed to apply custom styles to it like this:

function acf_map_style_overlay() {
  ?>
  <script>
    (function($) {

      acf.add_filter('google_map_args', function( args, $field ){

        var styleArray = [
          { ... my styles ... }
        ];

        args.styles = styleArray;

      	// return
      	return args;

      });
    })(jQuery);
  </script>
  <?php
}
add_action('acf/input/admin_footer', 'acf_map_style_overlay');

But I haven’t been able to access the marker styles.

Does anyone have experience with this?

(PS: I’d also be interested in drawing circles around the markers. Again, this works in the display of the maps via var circle = new google.maps.Circle and then circle.bindTo('center', marker, 'position');, but I have no idea to get it running within the form.)

• rgdesign

• March 12, 2017 at 11:52 am

You should use “google_map_marker_args” filter to change the icon, that is, into the marker itsefl, the google.maps.Map that uses “google_map_args” fitler, has not options for icon marker.

About style args, did you test using args[“styles”] = styleArray; ?

• dtx211

• March 14, 2017 at 6:00 am

Thanks! This solved my marker problem in 5 minutes!

Do you have any idea how to get the radius-circles to work?

If I add the following code inside acf.add_filter('google_map_marker_args', function(args, $field) {}, the console tells me ‘google is not defined’.

Here’s the code:

    var circle = new google.maps.Circle({
      map          : map,
      radius       : 1000,
      fillColor    : 'red',
      strokeColor  : 'red',
      strokeWeight : 1
    });
    circle.bindTo('center', marker, 'position');

• procopy

• June 5, 2018 at 1:14 am

Hey, care to share the code you used to actually set custom pin? I have a similar case, although I call entire group of fields on my page.php like that

<?php

                acf_form(array(
                    'post_id'		=> 'new_post',
                    'field_groups'  => array( 72 ),
                    'new_post'		=> array(
                        'post_type'	=> 'post',
                        'post_status'	=> 'publish',
                    ),
                    'submit_value'          => '[+] Send',
                    'return'                => '/',
                    'html_submit_button'    =>  '<input type="submit" id="addsignal" value="%s" />'
                ));

                ?>

… and I’m really stuck on how to pass custom pin parameters. Thanks.