Why does jQuery function not return any value?

Question

The jQuery function to work out and return the lat and long from a given address isn't working. I'm getting the address input from the form and I can display the address in the jQuery function but the geocode doesn't return anything.

<?php
    echo $this->Form->input('address_street',['id' => 'street']);
    echo $this->Form->input('address_suburb',['id' => 'suburb']);
    echo $this->Form->input('address_postcode',['id' => 'postcode']);
    echo $this->Form->input('address_state',['id' => 'state','type' => 'select', 'options' => $auStates, 'default' => 'VIC']);
?>
<hr>
<?php
    echo $this->Form->input('address_lat',['id' => 'lat']);
    echo $this->Form->input('address_long',['id' => 'long']);
?>

$(document).ready(function($) {
    var geocoder = new google.maps.Geocoder();

    $(document).on('click', '#calculate_address_lat_long', function () {
        var address = '';
        address += $('#street').val();
        address += ' ' + $('#suburb').val();
        address += ' ' + $('#postcode').val();
        address += ' ' + $('#state').val();

        //   alert( $('#street').val());
        //  alert( address);

        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                $('#lat').val(latitude);
                $('#long').val(longitude);
                $('#formated_address_lat_long')
                .html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
                .fadeTo(100, 0.1).fadeTo(250, 1)
                .css({"position": "relative","top": "15px"});
                alert($('#lat').val(latitude));
            } else {
                alert($('#lat').val(latitude));
                alert($('#long').val(longitude));
                $('#formated_address_lat_long')
                .fadeTo(100, 0.1).fadeTo(250, 1)
                .html('<div class="alert alert-error">Address Not Found</div>')
                .css({"position": "relative","top": "15px"});
            }
        });
    });
});

How can I solve it?

Answer 1

If I included the below line
this solved the problem

         <script type="text/javascript" src="maps.google.com.au/maps      /api/js?sensor=false"></…