I will try this and report back. Thanks for the quick reply!

This was pretty close. I had to change one or two small items. I will paste the code here in case anyone else wants to bind an address field with geocode to Google Maps inside a custom HTML control. Thanks again, great work!

$(document).ready(function () {
   if($("#Field4_DSG0").is("input"))
   {
   $.getScript('http://localhost/Forms/js/jquery.mask.min.js', function () {
   $(".phone input").mask("(999)999-9999");
   }); 
   $('#q58').hide();
   
   }
   else
   {
     var getLatLng = $('#q58').text();
     if(getLatLng.length > 0)
     {
       var q = getLatLng.replace("LatLong","");
       drawMap(q);
     }
   }
     $.cachedScript = function( url, options ) {
      options = $.extend( options || {}, {
      dataType: "script",
      cache: true,
      url: url
   });
   return $.ajax( options );
};
function drawMap(n) {
    var position =  n.split('|');
    var lt = position[0].replace("LatLong","");
    var latitude = lt;
    var longitude = position[1];
    document.getElementById("latlong-p").innerHTML = "Location found!<br />Latitude: " + latitude + "<br />Longitude: " + longitude;
    var google_tile = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=700x400&markers=color:red|" + latitude + "," + longitude;
    var canvas = document.getElementById("map-canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = google_tile;
    img.onload = function(){
      context.drawImage(img, 0, 0);
    }
  }
var gUrl = "https://maps.googleapis.com/maps/api/js?libraries=places";
var gcUrl = "https://ubilabs.github.io/geocomplete/jquery.geocomplete.js";
$.cachedScript(gUrl).done(
  function(){
    $.cachedScript(gcUrl).done(
  function( script, textStatus ) {
    //#Field4_DSG0 is the ID for the Street Address input on the Address widget
  $("#Field4_DSG0").geocomplete
            ({ details: "form", detailsAttribute: "class" }).bind(
              "geocode:result", 
              function(event, result){
                
                //https://developers.google.com/maps/documentation/geocoding/intro?csw=1#Types
                var ac = result.address_components;
                var lat = result.geometry.location.lat();
                var lng = result.geometry.location.lng();
                var c = {};
                $.each(ac, function(k,v1) {$.each(v1.types, function(k2, v2){c[v2]=v1.short_name});})
                
                var lo = c.locality;
                if(lo === undefined)
                  lo = c.postal_town;
                //#Field4_DSG2 is the ID for the City input on the Address widget
                $("#Field4_DSG2").val(lo);
                
                var aal = c.administrative_area_level_1;
                if(aal === undefined)
                  aal = c.administrative_area_level_2;
                
                //#Field4_DSG3 is the ID for the State / Province / Region input on the Address widget
                $("#Field4_DSG3").val(aal);
                
                var pc = c.postal_code;
                if(c.postal_code_suffix != undefined)
                  pc += "-" + c.postal_code_suffix;
                
                //#Field4_DSG4 is the ID for the Postal / Zip Code input on the Address widget
                $("#Field4_DSG4").val(pc);
                
                //#Field4_DSG5 is the ID for the Country input on the Address widget
                $("#Field4_DSG5").val(c.country);
                
                //Reformat Street Address to only have the address in it
                var addr = $("#Field4_DSG0").val().split(",");
                $("#Field4_DSG0").val(addr[0]);
                var position = lat + "|" + lng;
                $('#q58 input').val(position);
                $('#q54 input').val(lat);
                $('#q55 input').val(lng);
                drawMap(position);
                //console.log(result);
              });
       });    
});
});

Is is possible to get a copy of the actual form?

Laserfiche prohibits sending xml files. I have a blank copy that works great.

I will give you instructions to build it.

First create a new form. Second add three single line textboxes to your form. Name the first textbox LatLong. Name the second texbox Latitude. Name the third textbox Longitude. Next add the address control to the form. Make sure it is the fourth control you add. After you add the address control add the "Custom HTML" control to your form. Next click on the Custom HTML control and select edit. Under the Basic tab select the html button then add this HTML code. <canvas id="map-canvas" width="700" height="400"></canvas> Next click done. Then click on the "CSS and JavaScript" tab and enter the following code into the JavaScript section.

$(document).ready(function () {
   if($("#Field4_DSG0").is("input"))
   {
   
    
   
   }
   else
   {
     var getLatLng = $('#q1').text();
     if(getLatLng.length > 0)
     {
       var q = getLatLng.replace("LatLong","");
       drawMap(q);
     }
   }
   $('#q1').hide();
   $.cachedScript = function( url, options ) {
      options = $.extend( options || {}, {
      dataType: "script",
      cache: true,
      url: url
   });
   return $.ajax( options );
};
function drawMap(n) {
    var position =  n.split('|');
    var lt = position[0].replace("LatLong","");
    var latitude = lt;
    var longitude = position[1];
    //document.getElementById("latlong-p").innerHTML = "Location found!<br />Latitude: " + latitude + "<br />Longitude: " + longitude;
    var google_tile = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=700x400&markers=color:red|" + latitude + "," + longitude;
    var canvas = document.getElementById("map-canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = google_tile;
    img.onload = function(){
      context.drawImage(img, 0, 0);
    }
  }
var gUrl = "https://maps.googleapis.com/maps/api/js?libraries=places";
var gcUrl = "https://ubilabs.github.io/geocomplete/jquery.geocomplete.js";
$.cachedScript(gUrl).done(
  function(){
    $.cachedScript(gcUrl).done(
  function( script, textStatus ) {
    //#Field4_DSG0 is the ID for the Street Address input on the Address widget
  $("#Field4_DSG0").geocomplete
            ({ details: "form", detailsAttribute: "class" }).bind(
              "geocode:result", 
              function(event, result){
                
                //https://developers.google.com/maps/documentation/geocoding/intro?csw=1#Types
                var ac = result.address_components;
                var lat = result.geometry.location.lat();
                var lng = result.geometry.location.lng();
                var c = {};
                $.each(ac, function(k,v1) {$.each(v1.types, function(k2, v2){c[v2]=v1.short_name});})
                
                var lo = c.locality;
                if(lo === undefined)
                  lo = c.postal_town;
                //#Field4_DSG2 is the ID for the City input on the Address widget
                $("#Field4_DSG2").val(lo);
                
                var aal = c.administrative_area_level_1;
                if(aal === undefined)
                  aal = c.administrative_area_level_2;
                
                //#Field4_DSG3 is the ID for the State / Province / Region input on the Address widget
                $("#Field4_DSG3").val(aal);
                
                var pc = c.postal_code;
                if(c.postal_code_suffix != undefined)
                  pc += "-" + c.postal_code_suffix;
                
                //#Field4_DSG4 is the ID for the Postal / Zip Code input on the Address widget
                $("#Field4_DSG4").val(pc);
                
                //#Field4_DSG5 is the ID for the Country input on the Address widget
                $("#Field4_DSG5").val(c.country);
                
                //Reformat Street Address to only have the address in it
                var addr = $("#Field4_DSG0").val().split(",");
                $("#Field4_DSG0").val(addr[0]);
                var position = lat + "|" + lng;
                $('#q1 input').val(position);
                $('#q2 input').val(lat);
                $('#q3 input').val(lng);
                drawMap(position);
                //console.log(result);
              });
       });    
});
});

Save, Test and Enjoy

Hi Phil

Hate to be a bother but this is not working for me. I created the fields as you has suggested. See below. and I copied in the JS (minus the numbers on the left). And I get an error that says "Oops, Something went wrong" on the first line of the Address Box. I noticed in the JS Window that the Variables were showing in Red, See below.

Did I miss something?

Save attachment. Then rename attachment and change the extension from txt to xml. Then open forms. Select "Processes". Then click the New Process and Select upload. Then choose this file. It should work for you.

Thanks for your time in doing this, but strangely enough, it does the same thing. I'm not sure how our systems differ or why it doesn't see the field variables. I running on Forms 10.1

Wow, That's unbelievable. Unless the google code can tell your not in the US. <- That is the only thing I can think of. Here is a pic of my project.

I had the same problem when I tried this code.....any other ideas to get this working for someone outside the US, if that is in fact what is causing the error?

Hello Jody,

     I believe the original code will have to be modified and you will now have to get a google API key. When we first created this solution the code worked without a key, but now I believe it requires one. I think this is why it worked inside the US for a short time period, but did not work outside the US. You can look here for how to get a google API key

https://developers.google.com/maps/documentation/javascript/get-api-key

Once you have a key, you just modify the url inside the code that is referencing google maps to include your key. It should work once you include the key.

I'll give that a try. Thanks so much!