Home Forums Front-end Issues Adding Custom Markers to Map Field in Frontend Form


Adding Custom Markers to Map Field in Frontend Form

  • 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() {
        (function($) {
          acf.add_filter('google_map_args', function( args, $field ){
            var styleArray = [
              { ... my styles ... }
            args.styles = styleArray;
          	// return
          	return args;
    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.)

  • 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; ?

  • 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');
  • 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

                        '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.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Adding Custom Markers to Map Field in Frontend Form’ is closed to new replies.