<!DOCTYPE html>
<html id='ng-app' >
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
</head>
<body >
<form class="form-horizontal " role="form" style="margin:10vh 30%">
<div class="form-group">
<label class="control-label col-sm-2 " for="fullAddress">Address:</label>
<div class="col-sm-10">
<input type="text" name="fullAddress" id="fullAddress" class="form-control" />
</div>
</div>
<br/>
<div class="form-group">
<label class="control-label " for="StreetNumber">Street Number:</label>
<div>
<input type="text" name="StreetNumber" class="form-control" data-role="street_number"/>
</div>
</div>
<br/>
<div class="form-group">
<label class="control-label " for="Street">Street:</label>
<div>
<input type="text" name="Street" class="form-control" data-role="route"/>
</div>
</div>
<br/>
<div class="form-group">
<label class="control-label " for="City">City:</label>
<div>
<input type="text" name="City" class="form-control" data-role="administrative_area_level_2" />
</div>
</div>
<br/>
<div class="form-group">
<label class="control-label " for="City">locality:</label>
<div>
<input type="text" name="locality" class="form-control" data-role="administrative_area_level_1" />
</div>
</div>
<br/>
<div class="form-group">
<label class="control-label " for="ZipCode">ZipCode:</label>
<div>
<input type="text" name="ZipCode" class="form-control" data-role="postal_code"/>
</div>
</div>
<br/>
<div class="form-group">
<label class="control-label " for="Country">Country:</label>
<div>
<input type="text" name="Country" class="form-control" data-role="country"/>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js&libraries=places"></script>
<script src="addressAutocomplete.js" type="text/javascript"></script>
<script>
$(function (){
$("#fullAddress").googleMapAuocompleteAddress() ;
});
</script>
</body>
$(function (){
$.fn.googleMapAuocompleteAddress = function(opt) {
var options = $.extend({}, {}, opt);
return this.each(function(i, e){
if(! $(this).is("input"))return ;
var from=$(this).closest("form");
var autocomplete = new google.maps.places.Autocomplete($(this).get(0));
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var componenents=place.address_components||[];
var ln=componenents.length;
from.find("input[data-role]").val("");
for (var i=0 ; i<ln;i++) {
var editor=$("[data-role|="+componenents[i].types[0]+"]");
if(editor.is("input")){
editor.val(componenents[i].long_name);
}else{
editor.html(componenents[i].long_name);
}//end if
}//end for
});//end addListener
});//end each
};//end googleMapAuocompleteAddress
});