angular-google-places-map
Angular directive for Google Places Autocomplete created putting together code from this package and this sample code.
This directive provides the autocomplete function from Google Places Autocomplete library and shows picked location on a map.
How to use
Install agular-google-places-map as a bower package, with:
bower install --save angular-google-places-map
or using npm with:
npm install --save angular-google-places-map
and add libraries to your page:
<!-- Google Places API --><!-- Style (optional) -->
inject dependency inside your app:
angular;
finally place element inside your page:
Without any attribute this plugin is pretty useless, it just shows a map (centered in Italy) with an input field for search place. Let's add some fancy feature.
Scope var
Add attribute to html element:
and then inside javascript:
angular;
Now when a place is picked from input the result will be available inside this scope var.
Full example page here
Init with a place
Add attribute to html element:
and then inside javascript:
angular;
The map will be initialized with a marker in the given location.
Full example page here
Init with a place and a fallback
Add attributes to html element:
and then inside javascript:
angular;
In this example map will be initialized without marker but centered in the fallback location.
Full example page here
Custom callback function
Add attribute to html element:
and then inside javascript:
angular;
Now every time that a place is picked, our custom callback function will be invoked.
Full example page here