Google Address Autocomplete
--------------------------------------------------------------------------------------------------------
Index.cshtml
--------------------------------------------------------------------------------------------------------
@using Esurance.Mvc.Components.Web.Html;
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/Scripts/jquery.autocomplete_geomod.js" type="text/javascript"></script>
<script src="/Scripts/geo_autocomplete.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//Google Address Autocomplete function
$().ready(function () {
var options = {
selectFirst: true,
minChars: 3,
cacheLength: 50,
width: 300,
scroll: true,
scrollHeight: 330,
componentRestrictions: { country: 'us' }
};
$('#location').geo_autocomplete(new google.maps.Geocoder, options).result(function (_event, _data) {
if (_data) {
$('#location').val(_data.formatted_address);
}
});
});
</script>
<div class="container">
<div class="mainDiv">
<div class="leftDiv">
</div>
<div class="rightDiv">
<div class="leftSubDiv">
@{ Html.RenderPartial("_MenuBar"); }
<div class="editor-Item">
<div class="editor-label">
Address:
</div>
@Html.AddressAutoComplete("location")
</div>
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------
Layout.cshtml
--------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/css/ISAExpress.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Scripts/esurance.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
