Skip to content

Instantly share code, notes, and snippets.

@rajithsam

rajithsam/ngMap_address_auto_complete.html

Last active February 24, 2018 08:46
Show Gist options
  • Save rajithsam/b9f561f1bf2f221871fd697419abb2d4 to your computer and use it in GitHub Desktop.
Save rajithsam/b9f561f1bf2f221871fd697419abb2d4 to your computer and use it in GitHub Desktop.
Download ZIP
#Google Maps Autocomplete Input Address# This directive is useful for doing autocomplete input address. It shows the address preview on map. When you drag the pinned location the input filed shows the pinned address!
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment