<!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  
});