Javascript throwing a error after adding and running google places autocomplete code

I added the code below to my MVC application and although google places autocomplete in my text field works, some JavaScript file throws an error now when one of the javascript files gets used or rendered. here is the error in visual studio. It errors occurs when I hit the submit button on my main page.

Unhandled exception at line 626, column 256 in eval code

0x800a138f - JavaScript runtime error: Unable to get property 'value' of undefined or null reference

here is the code I added to the head tag in _Layout.cshtml

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

then I added the code below at the end of the body section in _Layout.cshtml

<script type="text/javascript">
    var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input);
</script>

and finally here is the form with the text field in index.cshtml that uses the places autocomplete.

@using (Html.BeginForm("Results", "Home", FormMethod.Get))
{
    <p>
        <input type="text" name="location" id="location" placeholder="Search For A Studio" />
    </p>
    <p>
        <input class="btn btn-primary btn-lg" value='Submit' type="submit"/>
    </p>
}

the error gets thrown when the line below gets hit in the debugger.

@RenderSection("scripts", required: false)

I read other posts with the same error message and I tried

var input = document.getElementById('<%=location.ClientID%>');

but it still errors.

Updated! - I tried adding a hard coded value to input like below and now I get this error message both when the page first loads and also when I press submit.

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getAttribute'

<script type="text/javascript">
        
        var input = "brighton";
        var autocomplete = new google.maps.places.Autocomplete(input);
        //debugger;
    </script>

This line

@RenderSection("scripts", required: false)

indicates that the error is happening when loading the scripts on the view being rendered inside of the _Layout Master Page.

Search for this on your View :

@section Scripts {}

By default Visual Studio adds jqueryval to template generated CRUD views, so if you're working with the templates, your page might have this on the end

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Try removing the jqueryval loading on your view. If jquery validation is needed, load it in the _Layout