Aleš Sýkora wrote

Fluent Forms maps input (usable with Toolset Maps too)

If you want to add map field with click to put marker function and save the GPS data, you can use the Google Maps API with Fluent Forms.

You will need Google Maps API Key and plugin for custom code snippets (you can also build your own plugin from the code by saving as PHP and adding Plugin header info to the file).

I am also using Advanced scripts for creation of Shortcode.

Prepare Fluent form

As a first step, create two numeric fields in Fluent Forms and add them this name attributes:
latInput
lngInput

Name attribute in fluent forms
Numeric fields for Latitude and Longtitude

As a second thing, create a shortcode field and put this shortcode inside:

[twiki_ff_google_maps]
Fluent Forms Shortcode field

Prepare the Map

Get your Google Maps API key

Add Google Maps script below to Advanced scripts and save it as a shortcode:

Using script as a shortcode in Advanced Scripts
<style type="text/css">
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

// Fixes potential theme css conflict.
.acf-map img {
   max-width: inherit !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=PUT YOUR KEY HERE"></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 ) {

    // Create gerenic map.
    var mapArgs = {
        zoom        : $el.data('zoom') || 16,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], mapArgs );

    // Init marker handlers
    initMarkers(map);

    // Center map to static location
    centerMap( map );

    // Return map instance.
    return map;
}

function updateFields(location) {
    $("input[name='latInput']").val(location.lat().toFixed(6));
    $("input[name='lngInput']").val(location.lng().toFixed(6));
}

/**
 * initMarkers
 */

function initMarkers( map ) {

    var marker;

    google.maps.event.addListener(map, 'click', function(event) {
       placeMarker(event.latLng);
    });

    function placeMarker(location) {

        if (marker == null)
        {
            marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable:true,
                animation: google.maps.Animation.DROP,
                title:"Drag me!"
            });

            function handleDrag(event) {
                updateFields(event.latLng)
            }

            marker.addListener("drag", handleDrag)
            marker.addListener("dragend", handleDrag)
        } 
        else 
        {
            marker.setPosition(location); 
        }

        updateFields(location);
    }

}

/**
 * centerMap
 */
function centerMap( map ) {
    var location = {lat: 49.81749199999999, lng: 15.472962}; // CHANGE THE DEFAULT MAP POSITION - current is Czech republic
    map.setCenter(location);
}

// Render maps on page load.
$(document).ready(function(){
    $('.acf-map').each(function(){
        var map = initMap( $(this) );
    });
});
})(jQuery);
</script>

<div class="acf-map" data-zoom="7">
<div class="marker" data-lat="" data-lng=""></div>
</div>

If you do not have Advanced scripts, just create a new shortcode and put the code below into function:

<?php function twiki_ff_map() {
    ob_start();
?>
    /*PUT THE CODE of MAP HERE*/
<?php
    $output = ob_get_contents();
    ob_end_clean();
    return $output;
}
add_shortcode( 'twiki_ff_google_maps', 'twiki_ff_map' );

The result

Save the form and use it on your website page or post or whenever you want. You should see this:

Variant for Toolset Forms

This works for Toolset Forms for creating posts as well. But instead of creating custom fields for latitude and longtitude, just create one custom field of Map type. Then in form use two generic text fields named “latInput” and “lngInput”. After making it working you will need to save data from generic fields to the custom map field. So change the

wpcf-custom-map-field-slug

to your Map fields slug and use this custom code to save the data on form saving:

<?php
add_action('cred_save_data', 'custom_function',10,2);
function custom_function($post_id, $form_data)
{
    // if a specific form
    if ($form_data['id']==83) //your form ID
      
    {
        $lat= $_POST["latInput"];
        $long = $_POST["lngInput"];
        $gps = "{".$lat.",".$long."}";
 
     update_post_meta($post_id, 'wpcf-custom-map-field-slug', $gps); 
     
    }
}
?>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Footer at the bottom of page Oxygen Builder
2. 12. 2020 in ,
Push your footer to the bottom in oxygen builder.
Read More
Aleš Sýkora wrote
Better product gallery lightbox with Oxygen and Fancybox
18. 1. 2021 in ,
I will show you, how I am creating galleries like this (open random car to see it) in Oxygen Builder. I hate the product builder and default behavior of WooCommerce lightbox and magnifying glass function on hover. So I am using Image block wrapped in link – for featured image. And Oxygen’s gallery block for […]
Read More
Aleš Sýkora wrote
Current Year for Copyright in WordPress and Oxygen Builder
Would you like to insert the Copyright information in footer of your website with current year? Use the PHP function Date() with format Y for current year. Normally it looks like: In Oxygen Builder you can use the Dynamic data > PHP function return value, which generates this shortcode:
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram