I'm new to using Google's APIs and have been trying to figure out how to implement the Places Autocomplete API with Angular. I've never really worked with autocomplete in general. I do not have the jQuery library pulled into my project at the moment, but I believe I've seen some developers utilizing that inside the directive with element.autocomplete.
I did look for any existing directives that might help with this, and I've found: https://github.com/kuhnza/angular-google-places-autocomplete
After setting that up according to the documentation, I haven't been able to get it to work, and I also didn't see where I would set up the API key for it to function in the first place. I think the main error has to do with the API key, but I'm not positive.
From what I understood, Google's Docs mention to include the API key as a key parameter when pulling the places library. If I omit the key like in the directive's documentation, I get MissingKeyMapError. If I add the key like Google says, I get ApiNotActivatedMapError. At the same time, Google also says my API key is a server API key, and "This key should be kept secret on your server".
The line for pulling in the library that I'm referencing is: <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Doing a cURL request with my PHP backend or just in the browser provides me with the results. So now I'm just trying to understand how Autocomplete works and how I could get it work with AngularJS.
So yeah, I'm a bit confused on this whole topic. If anyone could point me in the right direction or point out what I may be misunderstanding, it'd be a great help!
You can create a Google API key for a specific domain and in this way you will be sure that no one else can use it on his page etc.
I've also implimented Google place directive using this api and we need API key to get API SDK.
<script src="https://maps.googleapis.com/maps/api/js?libraries=places?key=your_key"></script>
Here is directive code.
angular.module('app')
.directive('googlePlace', directiveFunction);
directiveFunction.$inject = ['$rootScope'];
function directiveFunction($rootScope) {
return {
require: 'ngModel',
scope: {
ngModel: '=',
details: '=?'
},
link: function(scope, element, attrs, model) {
var options = {
types: [],
componentRestrictions: {}
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
model.$setViewValue(element.val());
$rootScope.$broadcast('place_changed', scope.details);
});
});
}
};
}
You can use it like
<input type="text" google-place ng-model="venue.address_line_1" aria-label="search">
and then in controller, catch the place_changed event.
$scope.$on('place_changed', function (e, place) {
// do something with place
});
you can pass your api key right here in the script as params
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
and after that if you see this error ApiNotActivatedMapError then it means that you need to activate the service google places in your google dev console
https://console.developers.google.com
under API Google Maps click more and you should see Google Places API Web Service click it and activate .
hope this helps
Related
I know I am reopening an old one (Perform filter on expanded entity with SAP Cloud SDK), but it was a while ago and was referencing the Java version of the API used to consume an S/4 HANA service.
I'm testing the Javascript version of the API against the SuccessFactors OData API, which is indeed able to perform filters on expanded entities, like so:
<API_HOST>/odata/v2/PerPerson?$filter=personalInfoNav/firstName eq 'MARCO'&$expand=personalInfoNav&$select=personalInfoNav/firstName, personalInfoNav/lastName&$top=20
Translated into the SDK, it would be (TypeScript):
const personList: Array<PerPerson> =
await PerPerson.requestBuilder().getAll().top(20)
.select(
PerPerson.DATE_OF_BIRTH,
PerPerson.PERSONAL_INFO_NAV.select(
PerPersonal.PERSON_ID_EXTERNAL,
PerPersonal.FIRST_NAME,
PerPersonal.LAST_NAME,
PerPersonal.GENDER
)
).filter(PerPersonal.FIRST_NAME.equals('MARCO'))
.execute({ destinationName: this.configService.get<string>('ACTIVE_DESTINATION') });
But this code does not compile because of the incompatibility of types for the filter function, which here expects a "PerPerson" type and not "PerPersonal".
I was not able to find anything about this.
Considering that the plain OData query works perfectly, anyone has been able to make this work?
Update:
I didn't initially understand that Successfactors offered this functionality on top of the protocol. There are two possible workarounds I can think of:
use new Filter, e.g.:
PerPerson.requestBuilder().getAll().top(20)
.select(
...
).filter(
new Filter('personalInfoNav/firstName', 'eq', 'MARCO')
)
...
If this doesn't work, you can call build on the request builder instead of execute, which gives you the ODataRequest object from which you can get the URL, which you'd then have to manipulate manually. Then you should be able to use the executeHttpRequest function to execute this custom request object against a destination.
Let me know if one of these work for you!
Original answer:
filtering on expanded entities on OData v2 is only possible if the relationship between the two entities is 1:1. In the case the code would look like this:
PerPerson.requestBuilder().getAll().top(20)
.select(
PerPerson.DATE_OF_BIRTH,
PerPerson.PERSONAL_INFO_NAV.select(
PerPersonal.PERSON_ID_EXTERNAL,
PerPersonal.FIRST_NAME,
PerPersonal.LAST_NAME,
PerPersonal.GENDER
)
).filter(
PerPerson.PERSONAL_INFO_NAV.filter(
PerPersonal.FIRST_NAME.equals('MARCO')
))
...
If, however, the relationship is 1:n, filtering is not possible.
Hope that helps!
I am attempting to add a Visual Studio Team Services (VSTS) Multivalue Combo Control in a custom tfs dashboard widget's configuration page. I am able to get the widget to appear and I can dynamically add values to it. But I am unable to "Save" the value. Below is the Javascript I am using to attempt to create and save this control's values. I recieve the error from the browsers console of "Uncaught TypeError: Cannot read property 'notify' of undefined" from line 34 (my "change" function inside my multiselect. I have attenpted to put the logic inside of the "load" function as that is genrally where you put the logic for the widget, but then i receive a error specifying that "create" is undefined in my var multiValueCombo = Controls.create(Combos.Combo, CustomContainer, multiValueOptions); line.
With how the current code stands. The "save button" does not enable when I make a change to the value in my control. I believe this is due to the "notify" function not firing.
VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/DistributedTask/TaskAgentRestClient", "VSS/Controls", "VSS/Controls/Combos"], function (WidgetHelpers, TFS_TaskAgentRestClient, Controls, Combos) {
VSS.register("DeploymentReports.Configuration", function () {
var CustomContainer = $("#custom-combo-container");
//Creating the Multiselect Control
var multiValueOptions = {
type: "multi-value",
width: 250,
source: [
"Ford"],
change: function () {
//What it does when you change the value of the multiselect
var customSettings = { data: JSON.stringify({ iteration: this.getText() }) };
var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
widgetConfigurationContext.notify(eventName, eventArgs); //I get an error for this line "Uncaught TypeError: Cannot read property 'notify' of undefined"
}
}
$("<label />").text("Select the supported languages:").appendTo(CustomContainer);
var multiValueCombo = Controls.create(Combos.Combo, CustomContainer, multiValueOptions);
var commandArea = $("<div style='margin:auto' />").appendTo(CustomContainer);
return {
load: function (widgetSettings, widgetConfigurationContext, Controls, Combos) {
//adding items to the multiselect drop down
multiValueOptions.source.push("Volvo");
multiValueOptions.source.push("Jeep");
return WidgetHelpers.WidgetStatusHelper.Success();
},
//Clicking the Save Button
onSave: function() {
var customSettings = {
data: JSON.stringify({
cars: multiValueOptions.getText()
})
};
return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings);
}
}
});
VSS.notifyLoadSucceeded();
});
According to your description, seems you want to save the data in the combo control. VSTS extensions have the ability to store user preferences and complex data structures directly on Microsoft-provided infrastructure.
There are two ways to interact with the data storage service: REST APIs or a Microsoft-provided client service available as part of the VSS SDK. It is highly recommended that extension developers use the provided client service APIs, which provide a convenient wrapper over the REST APIs.
Take a look a the concept about Data storage. This ensures your user's data is secure and backed up just like other account and project data. It also means for simple data storage needs, you (as the extension provider) are not required to setup or manage (or pay for) third-party data storage services.
The service is designed to let you store and manage two different
types of data:
Settings: simple key-value settings (like user preferences)
Documents: collections of similar complex objects (documents)
More details about how to set storage please refer official tutorial.
I want to display results pulled using Google Knowledge Graph API by using the javascript code provided by the official documentation on my HTML file. Refer here:
var service_url = 'https://kgsearch.googleapis.com/v1/entities:search';
var params = {
'query': 'united_kingdom',
'limit': 10,
'indent': true,
'key': '(myapikey)',
};
$.getJSON(service_url + '?callback=?', params, function(response) {
$.each(response.itemListElement, function(i, element) {
$('<div>', {text:element['result']['name']}).appendTo(document.body);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Why isn't it returning any result? I inspected it and saw that there is a javascript error (undefined).
I think that your script is correct. In my environment, your script worked. So can you confirm the following points?
Confirm whether Knowledge Graph Search API is enabled at the project that you have the API key?
You can see it at here.
Confirm whether the API is correct.
If this was not useful for you, I'm sorry.
I am very new to angualr js. I have found a very useful article about how to connect to API and use their information to show into our app using angular JS.
http://austinknight.net/weather-app-with-angular-js/
Only limitation is this weather forecast for US only. I can find many API which provided world wide forecast but I can't connect with them the way author has done here.
$http.get('https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22' + zip + '%22&format=json&diagnostics=true&callback=')
Can someone please help me to write up such a query string based API call for any country ?
I have done sufficient research but couldn't find anything similar.
Please help.
You can pass params like this
$http.get('https://query.yahooapis.com/v1/public/yql', {
params: {
q: 'your query',
format: 'json',
diagnostics: true,
callback: ''
}
});
I want to create a map with polygons using Google Fusion Tables. Instead of importing the data manually each time when there are new entries, I want to automatize it with AngularJS/Javascript.
My question is, how do I post and handle (through a controller or factory) the data automatically to a Fusion Table in AngularJS/Javascript? Does anyone know a good example or way to start? Do I need to work with JSON and if so how would that look like?
EDIT:
I already have retrieved the data from another API with the following controller:
.controller('DataCtrl', function($scope, $http) {
$scope.entries = [];
$http.get('main.json').success(function(data) {
angular.forEach(data.ParkingFacilities, function(entry) {
$http.get(entry.staticDataUrl).success(function(data) {
$scope.entries.push(angular.extend(entry, data.parkingFacilityInformation));
});
});
});
});
An example of the JSON file is available here: https://npropendata.rdw.nl/parkingdata/v2/