rajithsam/ngMap_address_auto_complete.html

## ngMap_address_auto_complete.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Address Autocomplete - Map</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- Leave those next 4 lines if you care about users using IE8 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

  	<div class="container" ng-app="addressMapApp">

	  <h1>Google Address Autocomplete Snippet</h1>

	  <div class="row">

        <div class="col-md-12">

            <label> Address </label>

	  		<address-map-input ng-model="map_address"></address-map-input>

	  	</div>

	 </div>

	</div>

    <!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBpi5mbQTFRpPEvNi3eMWQbvfi2Stpn7X8&libraries=geometry,places"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

    <script>

    	var addressMapApp = angular.module('addressMapApp', ['ngMap']);

		addressMapApp
        .directive('addressMapInput',['$locale','$compile', function( $locale, $compile )
    	{
            return {
                    restrict: 'E',
                    require: 'ngModel',
                    replace: true,
                    template: '<div><input class="form-control map_address" ng-model="map_address" places-auto-complete types="[\'geocode\']" on-place-changed="placeMarker()"/>'
                    +'<ng-map id="mapa" class="map_area" center="{{center}}" zoom="13" on-click="getpos($event)" style=\'height: 300px; width: 500px; margin:15px;\'>'
                    +'<marker position="{{latlng}}" on-dragend="getpos($event)" animation="Animation.BOUNCE" animation="DROP" draggable="true"></marker></ng-map></div>',
                    scope: {
                        map_address: '=ngModel',
                    },
                    link: function (scope, element, attrs)
                    {
                    	 //Google Map Settings
                        scope.center = [38.2477538, -85.72968300000002];

                        scope.latlng = [38.2477538, -85.72968300000002];

                        scope.map_address = '451 Baxter Avenue, Louisville KY 40204';

                        scope.getpos = function ( event )
                        {

                            scope.lat = event.latLng.lat();

                            scope.lng = event.latLng.lng();

                            scope.latlng = [event.latLng.lat(), event.latLng.lng()];

                            //console.log( scope.latlng );

                            var geocoder = new google.maps.Geocoder();

                            var latlng  = new google.maps.LatLng(scope.lat, scope.lng);

                            geocoder.geocode({ 'latLng': latlng }, function ( results, status )
                            {
                            	//$compile(element)(scope);

                                if (status == google.maps.GeocoderStatus.OK)
                                {

                                    if (results[1])
                                    {
                                        console.log( results[1]);
                                        scope.map_address = results[1].formatted_address;
                                        scope.$apply();

                                    }
                                    else
                                    {
                                        console.log( 'Location not found' );
                                    }


                                }
                                else
                                {
                                    console.log( 'Geocoder failed due to: ' + status);

                                }
                            });
                        };

                        scope.placeMarker = function()
                        {

                            var loc = this.getPlace().geometry.location;

                            scope.latlng = [loc.lat(), loc.lng()];

                            scope.center = [loc.lat(), loc.lng()];
                        };
                    }

            	};
    	}]);

    </script>

  </body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Address Autocomplete - Map</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- Leave those next 4 lines if you care about users using IE8 -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>

	<div class="container" ng-app="addressMapApp">

	<h1>Google Address Autocomplete Snippet</h1>

	<div class="row">

	<div class="col-md-12">

	<label> Address </label>

	<address-map-input ng-model="map_address"></address-map-input>

	</div>

	</div>

	</div>

	<!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBpi5mbQTFRpPEvNi3eMWQbvfi2Stpn7X8&libraries=geometry,places"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
	<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

	<script>

	var addressMapApp = angular.module('addressMapApp', ['ngMap']);

	addressMapApp
	.directive('addressMapInput',['$locale','$compile', function( $locale, $compile )
	{
	return {
	restrict: 'E',
	require: 'ngModel',
	replace: true,
	template: '<div><input class="form-control map_address" ng-model="map_address" places-auto-complete types="[\'geocode\']" on-place-changed="placeMarker()"/>'
	+'<ng-map id="mapa" class="map_area" center="{{center}}" zoom="13" on-click="getpos($event)" style=\'height: 300px; width: 500px; margin:15px;\'>'
	+'<marker position="{{latlng}}" on-dragend="getpos($event)" animation="Animation.BOUNCE" animation="DROP" draggable="true"></marker></ng-map></div>',
	scope: {
	map_address: '=ngModel',
	},
	link: function (scope, element, attrs)
	{
	//Google Map Settings
	scope.center = [38.2477538, -85.72968300000002];

	scope.latlng = [38.2477538, -85.72968300000002];

	scope.map_address = '451 Baxter Avenue, Louisville KY 40204';

	scope.getpos = function ( event )
	{

	scope.lat = event.latLng.lat();

	scope.lng = event.latLng.lng();

	scope.latlng = [event.latLng.lat(), event.latLng.lng()];

	//console.log( scope.latlng );

	var geocoder = new google.maps.Geocoder();

	var latlng = new google.maps.LatLng(scope.lat, scope.lng);

	geocoder.geocode({ 'latLng': latlng }, function ( results, status )
	{
	//$compile(element)(scope);

	if (status == google.maps.GeocoderStatus.OK)
	{

	if (results[1])
	{
	console.log( results[1]);
	scope.map_address = results[1].formatted_address;
	scope.$apply();

	}
	else
	{
	console.log( 'Location not found' );
	}


	}
	else
	{
	console.log( 'Geocoder failed due to: ' + status);

	}
	});
	};

	scope.placeMarker = function()
	{

	var loc = this.getPlace().geometry.location;

	scope.latlng = [loc.lat(), loc.lng()];

	scope.center = [loc.lat(), loc.lng()];
	};
	}

	};
	}]);

	</script>

	</body>

	</html>