jQuery-未捕获ReferenceError：未定义geolocate

Question

Trying to use the Google Address auto-complete API. My page loads fine however when initiating a search it doesn't return anything. When I Inspect Element I get the following error [Uncaught ReferenceError: geolocate is not defined]. I've searched resources on SOF and have tried the following:

• I'v moved my script to the bottom of the page
• I've Added the $(document).ready(function ()
• Declared all my var globally
• Verified all referenced id's exists

I would really appreciate so help. This has me pulling out what little hair I have left. Thanks

Here is my code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"     CodeFile="tet.aspx.cs" Inherits="tet" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

<div class="container-fluid">

    <%--   <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>--%>
    <asp:Panel ID="Panel1" runat="server">
        <br />

        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <asp:TextBox ID="autocomplete" CssClass="form-control input-lg" runat="server" onFocus="geolocate()" placeholder="Enter your address..."></asp:TextBox>
                    <asp:HiddenField ID="street_number" runat="server" />
                    <asp:HiddenField ID="route" runat="server" />
                </div>
            </div>
            <br />

            <div class="row">
                <div class="col-md-8">
                    Address:
<asp:TextBox ID="tb_AddressLine1" CssClass="form-control" ReadOnly="true" runat="server" ClientIDMode="Static"></asp:TextBox>
                </div>
            </div>
            <br />

            <div class="row">
                <div class="col-md-4">
                    City:
<asp:TextBox ID="locality" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                </div>
                <div class="col-md-2">
                    State:
<asp:TextBox ID="administrative_area_level_1" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                </div>
                <div class="col-md-2">
                    Postal Code:
<asp:TextBox ID="postal_code" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                </div>
                <div class="col-md-3">
                    Country:
<asp:TextBox ID="country" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                </div>
            </div>
        </div>


<br />
</asp:Panel>

--%>

</div</asp:Content>

 </div</asp:Content> 

Answer 1

I figured it out... I forgot to add ClientIDMode="Static" to all TextBoxes, so when the page is loaded the JavaScript doesn't "see" the fields it is looking for. Added that and it worked like a charm.

Answer 2

Instead of doing this on focus of the textbox, you can just activate it by calling geolocate() after having initialized the searchbox. This will surely work.

I mistakenly assumed that you were using a Google Map originally.