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>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
$(document).ready(function () {
var geolocation
var val
var addressType
var component
var place
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
place = autocomplete.getPlace();
for ( component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
$("#tb_AddressLine1").val(place.address_components[0][componentForm["street_number"]] + " " +
place.address_components[1][componentForm["route"]]);
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
});
</div</asp:Content>
