javascript google places works in html but not inside asp content

Question

I am trying to use a javascript example using google places api to auto fill some address fields. It works as planned in html but if I am wanting to use it inside tags it does not work. I am not seeing any js errors in firefox. I am thinking that I am not calling the javascrip correctly. Help is greatly appreciated. My code for the asp page, js file, and site.master are as follows:

test.aspx asp head

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="test.aspx.cs" Inherits="Project.test" %>

test.aspx page

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent" onload="javascript:initialize()">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript" src="../Scripts/auto_complete.js"></script>

<div id="locationField">

</div>
  <div id="consent-form-container">

  <div class="box">
     <table>
        <tr>
          <td>
            <asp:Label ID="Label8" runat="server" Text="Type Your Address:"></asp:Label>
          </td>
          <td>
            <asp:TextBox id="autocomplete" type="text" runat="server" placeholder="Enter your address" onFocus="javascript:geolocate()"></asp:TextBox>
          </td>
        </tr>

        <tr>
            <td>
              <asp:Label ID="Label9" runat="server" Text="Apt/Suite:"></asp:Label>
            </td>
            <td>
              <asp:TextBox ID="apt_suite1" runat="server" type="text" CssClass="apt_suite"></asp:TextBox>
            </td>
       </tr>                
    </table>
  </div>

  <div class="box">
  <table id="address">
    <tr>
      <td class="label">Street address</td>
      <td class="slimField"><asp:TextBox class="field" runat="server" id="street_number" type="text" disabled="true"></asp:TextBox></td>
      <td class="wideField" colspan="2"><input class="field" id="route" type="text" disabled="true"></input></td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="wideField" colspan="3"><asp:TextBox class="field" runat="server" id="locality" type="text" disabled="true"></asp:TextBox></td>
    </tr>
    <tr>
      <td class="label">State</td>
      <td class="slimField"><asp:TextBox class="field" runat="server" id="administrative_area_level_1" type="text" disabled="true"></asp:TextBox></td>
    </tr>
    <tr>
      <td class="label">Zip code</td>
      <td class="wideField"><asp:TextBox class="field" runat="server" id="postal_code" type="text" disabled="true"></asp:TextBox></td>
    </tr>
  </table>
  </div>
  </div>
  </asp:Content>

auto_complete.js

var placeSearch, autocomplete;
var component_form = {
    'street_number': 'short_name',
    'route': 'long_name',
    'locality': 'long_name',
    'administrative_area_level_1': 'short_name',
    'postal_code': 'short_name'
};

function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('<%= autocomplete.ClientID %>'), { types: ['geocode'] });
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
    });
}

function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in component_form) {
        document.getElementById(component).value = "";
        document.getElementById(component).disabled = false;
    }

    for (var j = 0; j < place.address_components.length; j++) {
        var att = place.address_components[j].types[0];
        if (component_form[att]) {
            var val = place.address_components[j][component_form[att]];
            document.getElementById(att).value = val;
        }
    }
}

 function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
        });
    }
}

and site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Project.SiteMaster" %>

<!DOCTYPE html>
<html lang="es">
<head id="head" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title><%: Page.Title %> title </title>
<asp:PlaceHolder runat="server">     
      <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>  
<webopt:BundleReference runat="server" Path="~/Content/css" /> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body id="body" runat="server">
    <form runat="server">
    <asp:ScriptManager runat="server">
    <Scripts>
        <%--Site Scripts--%>

    </Scripts>
</asp:ScriptManager>
<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <a runat="server" href="~/"><img src="/Images/logo.png" /></a>
            </p>
        </div>  
        <div class="float-right">
            <section id="login">
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul>
                            <li><a id="loginLink" runat="server" href="~/Account/Login">Login</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <p>
                            Welcome admin!, <a runat="server" class="username" href="~/admin" title="" style="color:white">
                                <!--<asp:LoginName runat="server" CssClass="username" ForeColor="White" />-->View Forms</a>
                            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Logout" LogoutPageUrl="~/" />
                        </p>
                    </LoggedInTemplate>
                </asp:LoginView>
            </section>
        </div>
    </div>
</header>
<div id="body_div">
    <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
    <section class="content-wrapper main-content clear-fix">
        <asp:ContentPlaceHolder runat="server" ID="MainContent" />
    </section>
</div>
<footer>
    <div class="content-wrapper">
        <div class="float-left">
            <p>&copy; <%: DateTime.Now.Year %> - Riviera Tanning Spa</p>
        </div>
    </div>
</footer>
</form>
</body>
</html>

Answer 1

change js like this

document.getElementById("MainContent_autocomplete")