(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
document.addEventListener( "wpcf7mailsent", function( event ) {
ga("send", "event", "AutocompleteLP", "submit");
gtag_report_conversion("https://navagis.com/autocomplete/");
}, false );
let autocomplete;
let cf7_form_auto;
let cf7_form_addr,cf7_form_city,cf7_form_zip,cf7_form_state;
let cf7_form_auto_fill;
let cf7_order_avg;
let cf7_abandon;
let cf7_conversion;
let address2Field;
let postalField;
let btn_reset;
let validA = false;
let valid = false;
let map_view;
let map_display;
let v_lat, v_lng;
let offset = 0,
offset_a = 0,
paused = true,
paused_a = true,
final_time = 0,
final_time_a = 0;
window.addEventListener('load', function () {
//cf7_form_fld = document.getElementsByClassName('wpcf7-form-control wpcf7-text wpcf7-validates-as-required');
cf7_form_fld = document.getElementsByClassName('wpcf7-form-control wpcf7-textarea');
cf7_order_avg = document.getElementById("text_order_avg");
cf7_abandon = document.getElementById("text_abandon_rate");
cf7_conversion = document.getElementById("text_conversion_rate");
cf7_order_avg.addEventListener("change",computeConversion);
cf7_abandon.addEventListener("change",computeConversion);
cf7_conversion.addEventListener("change",computeConversion);
clearValues();
cf7_form_addr = document.getElementById("text_street_manual");
cf7_form_addr.type = 'text'; cf7_form_addr.removeAttribute('autocomplete');
cf7_form_addr.addEventListener("focus", startStopwatch);
cf7_form_addr.addEventListener("blur", btnComplete);
cf7_form_city = document.getElementById("text_city_manual");
cf7_form_city.type = 'text'; cf7_form_city.removeAttribute('autocomplete');
cf7_form_city.addEventListener("focus", startStopwatch);
cf7_form_city.addEventListener("blur", btnComplete);
cf7_form_zip = document.getElementById("text_zip_manual");
cf7_form_zip.type = 'text';
cf7_form_zip.removeAttribute('autocomplete');
cf7_form_zip.addEventListener("focus", startStopwatch);
cf7_form_zip.addEventListener("blur", btnComplete);
cf7_form_state = document.getElementById("text_state_manual");
cf7_form_state.addEventListener("focus", startStopwatch);
cf7_form_state.addEventListener("blur", btnComplete);
cf7_form_auto = document.getElementById("text_street_addr_auto");
cf7_form_auto.type = 'text'; cf7_form_auto.removeAttribute('autocomplete');
cf7_form_auto.addEventListener("focus",startStopwatcha);
initAutocomplete();
});
function clearValues(){
var result2 = document.getElementById('result_time');
result2.style.display='none';
var resulttext2 = document.getElementById('result_m');
resulttext2.style.display='none';
var result1 = document.getElementById('result_time_a');
result1.style.display='none';
var resulttext1 = document.getElementById('result_a');
resulttext1.style.display='none';
map_view = document.getElementById('map_view');
map_display = document.getElementById('map_area');
map_display.style.display='none';
}
function book_meeting() {
cf7_form_fld[0].innerHTML = "I would like to hear more about Google Maps Autocomplete.";
}
function scrolltoform() {
let e = document.getElementById("letstalk");
e.scrollIntoView({
alignToTop:true,
block: 'start',
behavior: 'smooth',
inline: 'center'
});
}
function startStopwatch() {
if (paused) {
paused = false;
offset -= Date.now();
render();
}
}
function stopStopwatch() {
if (!paused) {
paused = true;
offset += Date.now();
}
}
function resetStopwatch() {
if (paused) {
offset = 0;
render();
} else {
offset = -Date.now();
}
}
function format(value, scale, modulo, padding) {
value = Math.floor(value / scale) % modulo;
return value.toString().padStart(padding, 0);
}
function render() {
var value = paused ? offset : Date.now() + offset;
document.getElementById("millis").innerHTML = format(value, 1, 1000, 2);
document.getElementById("seconds").innerHTML = format(value, 1000, 60, 2);
if (format(value, 60000, 60, 2) >0){
document.getElementById("minutes").innerHTML = format(value, 60000, 60, 2) + "m ";
} else {
document.getElementById("minutes").innerHTML = "";
}
if(!paused) {
requestAnimationFrame(render);
}
}
function startStopwatcha() {
if (paused_a) {
paused_a = false;
offset_a -= Date.now();
render_a();
}
}
function stopStopwatcha() {
if (!paused_a) {
paused_a = true;
offset_a += Date.now();
}
}
function resetStopwatcha() {
if (paused_a) {
offset_a = 0;
render_a();
} else {
offset_a = -Date.now();
}
}
function render_a() {
var value = paused_a ? offset_a : Date.now() + offset_a;
document.getElementById("millis_a").innerHTML = format(value, 1, 1000, 2);
document.getElementById("seconds_a").innerHTML = format(value, 1000, 60, 2);
if (format(value, 60000, 60, 2) > 0){
document.getElementById("minutes_a").innerHTML = format(value, 60000, 60, 2)+"m ";
}
else {
document.getElementById("minutes_a").innerHTML = "";
}
if(!paused_a) {
requestAnimationFrame(render_a);
}
}
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(cf7_form_auto,
{componentRestrictions: { country: ["us"] },
fields: ["address_components","geometry","place_id","name","formatted_address"],
types: ["address"],}
);
// Update address
autocomplete.addListener("place_changed", fillInAddress);
}
function fillInAddress() {
stopStopwatcha();
btnCompleteA();
let place_add = autocomplete.getPlace();
let address1 = "";
let postcode ="";
let v_latlng ="";
let search_q ="";
//console.log(place_add);
for (i = 0; i 0){
validA = true;
}
return validA;
}
function btnCompleteA(){
if (validationA){
var value = paused_a ? offset_a : Date.now() + offset_a;
final_time_a = value;
document.getElementById("millis_a_r").innerHTML = "s " + format(value, 1, 1000, 2);
document.getElementById("seconds_a_r").innerHTML = format(value, 1000, 60, 2);
if (format(value, 60000, 60, 2) >0){
document.getElementById("minutes_a_r").innerHTML = format(value, 60000, 60, 2)+"m ";
}
document.getElementById("result_a").innerHTML = "Time to complete address entry.";
var result1 = document.getElementById('result_time_a'); result1.style.display='block';
var resulttext1 = document.getElementById('result_a'); resulttext1.style.display='block';
showResult();
}
}
function validation(){
var regexp = /^[0-9]{5}(?:-[0-9]{4})?$/;
if(cf7_form_addr.value=='' || cf7_form_city.value=='' || cf7_form_zip.value=='' || cf7_form_city.value=='Street Address*' || cf7_form_city.value=='City*' || cf7_form_zip.value=='Zip Code*' ){
valid = false;
} else {
if(regexp.test(cf7_form_zip.value)){
valid = true;
} else {
valid = false;
}
}
return valid;
}
function btnComplete(){
if (validation()){
stopStopwatch();
var value = paused ? offset : Date.now() + offset_a;
final_time = value;
document.getElementById("millis_m_r").innerHTML = "s "+format(value, 1, 1000, 2);
document.getElementById("seconds_m_r").innerHTML = format(value, 1000, 60, 2);
if (format(value, 60000, 60, 2) >0){
document.getElementById("minutes_m_r").innerHTML = format(value, 60000, 60, 2)+"m ";
}
document.getElementById("result_m").innerHTML = "Time to complete address entry.";
var result1 = document.getElementById('result_time'); result1.style.display='block';
var resulttext1 = document.getElementById('result_m'); resulttext1.style.display='block';
showResult();
}
}
function showResult(){
if (final_time > final_time_a && final_time_a > 0){
var value = final_time - final_time_a
var time = format(value, 1, 1000, 2);
if(format(value, 1000, 60, 2)>0){
time = format(value, 1000, 60, 2) +"."+ time;
}
document.getElementsByClassName("fusion-highlighted-text")[0].innerHTML = " "+time+"s ";
}
}
function btnReset(){
document.getElementsByClassName("wpcf7-form")[0].reset();
document.getElementsByClassName("wpcf7-form")[1].reset();
stopStopwatch();
stopStopwatcha();
resetStopwatch();
resetStopwatcha();
clearValues();
let e = document.getElementById("form_top");
e.scrollIntoView({
alignToTop:true,
block: 'start',
behavior: 'smooth',
inline: 'center'
});
}
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
});
function computeConversion(){
var abandon_conv = 0;
var revenue = 0;
var order_avg = parseFloat(document.getElementById("text_order_avg").value).toFixed(2);
var abandon = parseFloat(document.getElementById("text_abandon_rate").value).toFixed(2);
var conversion = parseFloat(document.getElementById("text_conversion_rate").value).toFixed(2);
if (order_avg.length > 0 && abandon.length > 0 && conversion.length > 0 ){
conversion = parseFloat(conversion)/100;
abandon = ((parseFloat(abandon)/100) * 1000);
abandon_conv = abandon * conversion;
revenue = abandon_conv.toFixed(2) * order_avg;
document.getElementById("text_revenue").innerHTML = formatter.format(revenue);
}
}
By incorporating the Google Maps Places Autocomplete API in your online shopping cart, you can:
