php 谷歌地址自动填写重力表单列表字段中的地图

Posted 2021-05-05

add_filter('gform_column_input_content_2_12_1', 'change_column2_content', 10, 6);

function change_column2_content($input, $input_info, $field, $text, $value, $form_id) {
    $input_field_name = 'map_container';
    $hidden_field_name = 'input_' . $field->id . '[]';
    $tabindex = GFCommon::get_tabindex();
    ob_start();
    ?>
    <div style="display:none;" class="overlay" onClick="style.pointerEvents = 'none'"></div> <div class="<?php echo $input_field_name ?>"  style="width:100%;height:230px"></div><input type="hidden" name="map_val_lat[]" value="" class="map_val_lat"><input type="hidden" name="map_val_lng[]" value=""class="map_val_lng"><a class="vogue_gf_custom_loc" href="javascript:void(0);">Still can't find your store?</a><div style="display:none;" class="cus_address ginput_complex ginput_container has_street has_city has_state has_zip has_country ginput_container_address gfield_trigger_change" id="cus_address">
        <span class="ginput_full address_line_1" id="cus_address_1_container">
            <label for="cus_address_1" id="cus_address_1_label">Street Address</label>
            <input type="text" name="input_46.1" id="cus_address_1" value="" tabindex="26.1">
        </span>
        <span class="ginput_left address_city" id="cus_address_3_container">
            <label for="cus_address_3" id="cus_address_3_label">City</label>
            <input type="text" name="input_46.3" id="cus_address_3" value="" tabindex="26.2">
        </span>
        <span class="ginput_right address_state" id="cus_address_4_container">
            <label for="cus_address_4" id="cus_address_4_label">State / Province / Region</label>
            <input type="text" name="input_46.4" id="cus_address_4" value="" tabindex="26.3">
        </span>
        <span class="ginput_left address_zip" id="cus_address_5_container">
            <label for="cus_address_5" id="cus_address_5_label">ZIP / Postal Code</label>
            <input type="text" name="input_46.5" id="cus_address_5" value="" tabindex="26.4">
        </span>
        <div class="gf_clear gf_clear_complex"></div>
    </div>
    <?php
    $input .= ob_get_clean();
    return $input;
}
/*adding dynamically list field label increments*/
add_action('wp_head', 'hook_css');
function hook_css() {
    ?><style>
       body .gw-number-rows table.gfield_list {
            counter-reset: gflistrowcounter;
        }       .gw-number-rows .gfield_list tbody tr:before {
            content: counter(gflistrowcounter);
            counter-increment: gflistrowcounter;
             font-size: 0;            
        }    
     
        .gfield_list_icons:before{
             content:'';
             font-size: 0 !important;
        }
        .register_form .address_autofill_repeater .ginput_container_list .gfield_list thead  {
            display:none; 
        }
        .gform_wrapper ul.gform_fields.form_sublabel_above table.gfield_list td::before, .gform_wrapper ul.gform_fields.form_sublabel_below table.gfield_list td::before {
            content: attr(data-label)' 'counter(gflistrowcounter);           
            font-size: 14px;
            letter-spacing: .5pt;
            white-space: nowrap;
            display: block;
            clear: both;
        }
        .gfield_list_cell.gfield_list_4_cell1, .gfield_list_cell.gfield_list_4_cell2, .gfield_list_cell.gfield_list_4_cell3 {
            display: block;
            float: left;
        }
        .gfield_list_cell.gfield_list_4_cell4 {
            display: block;
            float: right;
        }
        .gfield_list_cell.gfield_list_4_cell1, .gfield_list_cell.gfield_list_4_cell2 {
            width: 99%;
        }
        .gfield_list_4_cell2, .gfield_list_4_cell4, .gfield_list_4_cell3 {
            width: 33%;
        }
        .gform_wrapper table.gfield_list td + td, .gform_wrapper table.gfield_list th + th {
            padding: 0 0 0 0px;
            padding-right: 9px;
        }
        .gfield_list_cell.gfield_list_4_cell1 {
            margin-top: 20px !important;
            border-top: 5px solid #65a9cc !important;
        }
    </style>
    <?php
}

var map = [] || {}, places = [] || {};
var globalMap = [] || {};
var markers = [] || {};
var marker;
var autocomplete = [] || {};
var map_lat = [] || {};
var map_lng = [] || {};
var global_map_lat_lng = {};
var obj_string = '';
var countryRestrict = {country: 'AU'};
var autofill_address;
var geocoder;
var $jK = 0;
function retriveLatLong() {
    if (jQuery(".gfield_list_group").length > 0) {
        global_map_lat_lng = {};
        var tableRow = jQuery(".gfield_list_group");
        tableRow.each(function () {
            var time = jQuery(this).attr("unique-id");
            var lat = jQuery(this).find(".map_val_lat").val();
            var lng = jQuery(this).find(".map_val_lng").val();
            var add = jQuery(this).find("input[name='input_12\[\]']").eq(0).val();
            global_map_lat_lng[time] = {'lat': parseFloat(lat), 'lng': parseFloat(lng), 'add': add};
        });
        jQuery("#input_2_38").val(JSON.stringify(global_map_lat_lng));
    }
}
function addAutocomplete(autofill_address, count) {
    $jK = 0;
    var cityBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-37.813628, 144.963058),
            new google.maps.LatLng(-33.868820, 151.209296),
            new google.maps.LatLng(-33.882230, 151.196960)
            );
    geocoder = new google.maps.Geocoder();
    autocomplete[count] = new google.maps.places.Autocomplete((autofill_address), {
        strictBounds: true,
        bounds: cityBounds,
        types: ['address']
//        componentRestrictions: countryRestrict
    });
    places[count] = new google.maps.places.PlacesService(map[count]);
        autocomplete[count].addListener('place_changed', function () {
        // console.log("place_changed");
        $jK = 0;
        jQuery(document).trigger("gmap_place_changed",[count]);
        var place = autocomplete[count].getPlace();
        if (place.geometry) {
            map[count].panTo(place.geometry.location);
            $jK = 1;
//            console.log(place);
//            jQuery("tr[unique-id='" + count + "']").find(".map_val_lat").val(place.geometry.location.lat());
//            jQuery("tr[unique-id='" + count + "']").find(".map_val_lng").val(place.geometry.location.lng());
            map_lat = place.geometry.location.lat();
            map_lng = place.geometry.location.lng();
            GetAndSetLatLong(count, map_lat, map_lng);
            retriveLatLong();
            map[count].setZoom(15);
            markers[count] = new google.maps.Marker({
                position: place.geometry.location,
                map: map[count],
                draggable: true,
            });
            getLatLongWhenDrag(count);
        }
    });
}
function getLatLongWhenDrag(count) {
    google.maps.event.addListener(markers[count], 'dragend', function (event) {
        var lt = this.getPosition().lat();
        var lg = this.getPosition().lng();
        geocodePosition(markers[count].getPosition(), function (responses) {

            var replaceFrom = "";
            var replaceTo = "";
            var getZip = "";
            var all_components = responses[0].address_components;

            for (var key in all_components) {

                if (all_components[key].types[0] == "administrative_area_level_1") {
                    replaceFrom = all_components[key].short_name;
                    replaceTo = all_components[key].long_name;

                }

                if (all_components[key].types[0] == "postal_code") {
                    getZip = all_components[key].short_name;

                }
            }

            if (replaceTo !== "" && replaceFrom !== "") {
                var replacedString = responses[0].formatted_address.replace(replaceFrom, replaceTo);
                replacedString = replacedString.replace(getZip, "");
                console.log(replacedString);
            }


            GetAndSetLatLong(count, lt, lg, replacedString);
        });
    });
}
function GetAndSetLatLong(count, lat, lng, address) {
    if (typeof address != 'undefined') {
        jQuery("tr[unique-id='" + count + "']").find("input[name='input_12\[\]']").eq(0).val(address);
    }
    jQuery("tr[unique-id='" + count + "']").find(".map_val_lat").val(lat);
    jQuery("tr[unique-id='" + count + "']").find(".map_val_lng").val(lng);
    jQuery(".latlong").text("coordinates: " + lat + ", " + lng);
    retriveLatLong();
}
function geocodePosition(pos, callback) {
    geocoder.geocode({
        latLng: pos
    }, function (responses) {
        if (typeof callback == 'function') {
            callback(responses);
        }
        // console.log(responses[0].formatted_address);
    });
}
function initMap(container, count, center) {
    var center_un = false;
    if (typeof center == 'undefined' || center == "undefined") {
        center_un = true;
        center = {lat: -25.3, lng: 133.8};
    }
    if (center.hasOwnProperty('lat')) {
        map[count] = new google.maps.Map(container, {
            zoom: center_un == true ? 4 : 15,
            center: center,
            mapTypeControl: false,
            panControl: false,
            zoomControl: false,
            streetViewControl: false
        });
        markers[count] = new google.maps.Marker({
            position: center,
            map: map[count],
        });
    }
}
if (typeof gform !== "undefined") {
    gform.addAction('gform_list_post_item_add', function ($elem, $container, map_lat, map_lng) {
        var d = new Date();
        var timstamp = d.getTime();
        $elem.attr("unique-id", timstamp);
        var inputAddress = $elem.find(".gfield_list_12_cell1 input");
        var mapElement = $elem.find(".map_container");
        if (inputAddress.length > 0) {
            globalMap.push(timstamp);
            initMap(mapElement[0], timstamp);
            addAutocomplete(inputAddress[0], timstamp);
        }
    });
    gform.addAction('gform_list_post_item_delete', function ($elem, $container, map_lat, map_lng) {
        genrateLocationNumber();
//     call_fixed_var();
    });
}
jQuery(window).load(function () {
    var d = new Date();
    var timstamp = d.getTime();
    if (jQuery("input[name='input_12[]']").length > 0) {
        globalMap.push(timstamp);
        initMap(jQuery(".map_container").eq(0)[0], timstamp);
        addAutocomplete(jQuery("input[name='input_12[]']").eq(0)[0], timstamp);
    }
});
jQuery(document).bind('gform_page_loaded', function (event, form_id, current_page) {
    console.log('form_id= ' + form_id + 'current_page= ' + current_page);
    if (current_page == 2) {
        if (jQuery("#input_2_38").length > 0 && jQuery("#input_2_38").val().length > 0) {
            global_map_lat_lng = JSON.parse(jQuery("#input_2_38").val());
            var $i = 0;
            for (var timstamp in global_map_lat_lng) {
                var $tableRow = jQuery(".gfield_list_group").eq($i);
                if ($tableRow.length > 0) {
                    $tableRow.attr("unique-id", timstamp);
                    initMap($tableRow.find(".map_container")[0], timstamp, {lat: parseFloat(global_map_lat_lng[timstamp]["lat"]), lng: parseFloat(global_map_lat_lng[timstamp]["lng"])});
                    addAutocomplete($tableRow.find("input[name='input_12[]']")[0], timstamp);
                }
                $i++;
            }
        } else {
            var d = new Date();
            var timestamp = d.getTime();
            var $elem = jQuery(".gfield_list .gfield_list_group ").eq(0);
            $elem.attr("unique-id", timestamp);
            if (jQuery("input[name='input_12[]']").length > 0) {
                globalMap.push(timestamp);
                initMap(jQuery(".map_container").eq(0)[0], timestamp);
                addAutocomplete(jQuery("input[name='input_12[]']").eq(0)[0], timestamp);
            }
        }
    }
});
jQuery(document).bind('gform_post_render', function () {
    jQuery('body').on('keyup', 'td[data-label="Column 1"] input[name="input_12[]"]', function (event) {
        $jK = 1;
    });
});
jQuery(document).on('keypress', '.gform_wrapper', function (e) {
    var code = e.keyCode || e.which;
    if (code == 13 && $jK == 1) {
        e.preventDefault();
        return false;
    }
});

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAQqe5fTZZbQMcZwhXOuvCx5q9K1UF_7Hk&libraries=places" async defer></script>