jquery geolocate on a https form

Question

I have following questions.

I have a form on formassembly and now i want to integrate with jquery the option to get the address in the right format.

First, I saved the folder to my homepage.

I requested an API with google.

Then i set up the html code in the form as following:

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery-1.8.3.min.js"></script>
  <script src="//****.net/jquery/jquery.geocomplete.min.js"></script>
    <script>
        $(function() {
            $("#tfa_17").geocomplete({
                details: ".geo-details",
                detailsAttribute: "data-geo"
            });

        });
    </script>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyDiWK_iGIPDeSfCHJUb6gYNTg4HnByKZEM&amp;libraries=places&amp;callback=initGoogleMaps"></script>

Now, I receive the following errors:

enter image description here

Sorry, if that might be simple, but its the first time for me.

Thanks in advance for any help

Answer 1

Try this will may help you,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDiWK_iGIPDeSfCHJUb6gYNTg4HnByKZEM&callback=initMap"></script>

<script>
        $(function() {
            $("#tfa_17").geocomplete({
                details: ".geo-details",
                detailsAttribute: "data-geo"
            });

        });

  function initMap() {}
</script>

callback parameter accepts callback function name where the function itself should have the following signature:

function initMap() {}

and you have to active API to use.