googlewebcomponents / google-apis Goto Github PK
View Code? Open in Web Editor NEWWeb components for loading Google's JavaScript Libraries
Home Page: https://elements.polymer-project.org/elements/google-apis
License: Other
Web components for loading Google's JavaScript Libraries
Home Page: https://elements.polymer-project.org/elements/google-apis
License: Other
Seeing that this.root is now used to refer to the elements local DOM having a property with this name doesn't seem to be the best idea. I would suggest renaming it to apiRoot
/ api-root
.
Hi!
After a quick test It seems like the support for using custom api endpoints isn't working using the apiRoot property.
The problem may be that the apiRoot property might not be recognised by gapi
(or is the root param undocumented? https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiclientloadname--------version-callback) as it looks like it's searching the global domain.
The code:
<google-client-loader id="api" name="test" version="v1" apiRoot="http://localhost:8080/_ah/api"></google-client-loader>
The response:
{"error":{"errors":[{"domain":"global","reason":"notFound","message":"Not Found"}],"code":404,"message":"Not Found"}}
[update]
Right now I've pinpointed the problem to the apiRoot property not being set via the attribute.
The apiRoot attribute is picked up and the value resides inside this.attributes['apiroot']
but this.apiRoot
(on line 212 in google-client-loader.html) is undefined thus causing it to fail.
At the moment, the root can be set by using the appId attribute. However, the appspot.com domain is hardcoded. It would be nice if there was an attribute that allowed to access APIs on localhost (running on the development server).
First is it possible to use the Contacts API
with the google-client-loader
because I can't find it in the API's Explorer, which confused me. In my opinion it is a very common API, so I should have been listed as a Google API ...
If it is not possible to use this API, could you implement this API? I want to use it throw the really cool and handy google-client-loader
.
And if it's not of your business, where should I submit a issue for that?
Related to #82 ๐ , I think that this component can make the jump directly to 3.0, or you could both since the effort is almost the same.
Eventual PRs will ever be accepted?
I tried this while logged in as the 'wrong' user and it called the success event handler, but the api wasn't in the window.gapi.client object, so it must have failed. It took me ages to realise I wasn't in the correct account and when I switched, the object was added and I got an error 'Login Required', which at least pointed me in the right direction.
Please consider checking if the api was successfully added before concluding 'success'.
I am migrating a site to web components and there are parts of our site with libraries that I can't swap over immediately. To this end, we already have Google Maps loading in the site.
The problem is that the google-maps-api doesn't check or have any way to not reload the API if it already exists in the site.
At the top of _computeUrl if you put in:
if (google && google.maps) { return null; }
It would be much better to have a method to indicate that a google.maps library is already loaded and to just use that. I think that is better than making a duplicate instance of google-maps and the other.
For example, if I go
<google-maps-api libraries="places" apiKey="derp"></google-maps-api>
it works just fine.
But if I follow the instructions in google-maps-api.html for multiple libraries like so:
<google-maps-api libraries="places,geometry" apiKey="derp"></google-maps-api>
I get a 400 error for the following URL (with the key omitted of course):
https://maps.googleapis.com/maps/api/js?callback=https___maps_googleapis_coโฆ.exp&libraries=places,geometry
I'm noting here that the format is different from the referenced format in developers.google.com/maps/documentation/javascript/libraries, but I understand that the callback format is required by the API. (So I don't know how significant that is)
Any plans to add support for dev_appserver? I realize you'd need to pass a port
and optionally hostname
. Would you accept a PR for this?
I went through learning to work with the Oauth flow, and it definitely is a bit convoluted. Maybe include a note to refer to GAPI docs and include a simple oauth flow example? such as:
API = event.target
API.auth.authorize({
client_id: 'CLIENT ID',
immediate: true,
scope: 'SPACE DELIMITED SCOPES'
},function(e){console.log(e)})
Enhancement to #18
Currently the <google-api-loader>
only supports loading a Cloud Endpoint API from a deployed version on App Engine using https://{{appId}}.appspot.com/_ah/api
as root.
For local testing there needs to be some way to use http://localhost:{{port}}/_ah/api
as API root instead.
Hi,
I am trying to use google-map element with Angular 2: the display is correct, and all the google-map properties work well, but the properties of google-maps-api. For example:
<google-map api-key="AIzaSyCqrVHpM_zlUEPtxJPQiFYIqwfKcOctB_M" language="en" latitude="37.77493" longitude="-122.41942"></google-map>
I see the following error twice, once for each property that belongs to the google-maps-api (language
and api-key
):
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
In fact, in the browser Sources, I see three loads of Google Maps Api: one with no parameters, one with the API key and finally one with the API key and the language.
If I set directly into the google-map the properties, the error does not occur:
<google-maps-api id="api" api-key="AIzaSyCqrVHpM_zlUEPtxJPQiFYIqwfKcOctB_M" client-id="[[clientId]]" version="[[version]]" signed-in="[[signedIn]]" language="en" on-api-load="_mapApiLoaded"></google-maps-api>
I have seen that this error occurs in other cases, such as: #22
Is there an explanation? Thanks.
While trying to use this component by declaring it as a dependency in my pubspec.yaml of my project i get the error :
"Error in pubspec for package "google-apis" loaded from ...
Could not find a file named "pubspec.yaml" in ..."
It seams a pubspec.yaml is required for pub to work. There is not in this repository.
This is my pubspec.yaml:
name: angular_todo
version: 0.12.0
dependencies:
angular: 0.12.0
angular_node_bind: any
shadow_dom: any
browser: any
polymer: ">=0.11.0 <0.12.0"
core_elements: ">=0.0.6 <0.1.0"
polymer_elements: #0.2.0-pre.8
git: https://github.com/bwu-dart/polymer_elements
google-apis:
git: https://github.com/PolymerLabs/google-apis
transformers:
dependency_overrides:
browser: any
web_components: 0.4.0
analyzer: ">=0.15.6 <0.16.0"
html5lib: ">=0.11.0 <0.12.0"
Adding support to use the google-apis element in a Single Page Application, at the moment when the element is dynamically added in the the page, it does not load the library.
Example: When a google-client-loader is loaded in a dom-repeat template element, it do not load the library because when the dom-repeat template is stamped, client libraries are already loaded, but the name and version are not bound, so the library does not get loaded.
So the libraries
callback fix is in (#20).
Great going, google-client-loader
component works like a charm.
However, I had some pain points while using it. Had to write a wrapper component just to refresh the access token. It would be great if access token is refreshed automatically.
One common scenario when using the Google JS Client library is to load client.js and plusone.js at the same time with this URL: https://apis.google.com/js/client:plusone.js
I would suggest to have a matching <google-client-plusone-api>
element.
I'm aware that you could use <google-client-api>
+ <google-plusone-api>
but then you would have to wait for two separate api-load
events to finish, which adds unnecessary complexity.
It looks like the code in ready hook may not works properly and event js-api-load could be fired earlier than it is listned so the client is never loaded.
this._loader = document.createElement('google-js-api');
this.listen(this._loader, 'js-api-load', '_loadClient');
Tested on Google Chrome 52.0.2743.82 (64-bit)
Somewhat related to #20.
Especially problematic with <google-map>
, which has its own import of <google-maps-api>
with hard-coded libraries="places"
. If on the same page you have a <google-maps-api>
with libraries="places,geometry"
, two things happen:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
This suggests that core-shared-library treats these two as separate, which causes the google warning.<google-map map="{{gmap}}">
, gmap is not considered by the geometry library as type Map.<google-map>
(and therefore doesn't use its own <google-maps-api>
) works just fine.google-maps-api.html
default value for libraries
to "places,geometry
", the geometry library works properly when used with google-map
.Bower doesn't seem to update properly unless a new release is made.
If you know depend on Polymer 0.5, please create a new release with this.
Thank you.
google-maps-api shouldn't only load the places library by default. Users should be able specify which libraries they would like to use (or none at all).
Should this element be moved to https://github.com/GoogleWebComponents?
Although 0.9 is still beta, it would be worth to update the dependencies.
I am trying to understand the intended purpose of google-maps-api. There is only brief information shown on webcomponents.org.
I have made a first test using the google-maps-api web component with Polymer 2.0. I am able to display a map and a marker, but am encountering positioning issues and also need to refresh the screen several times to get an initial render. Maybe these issues are related to Polymer 2.0 or maybe I am using the google-maps-api for the wrong purpose? Are there any examples of using google-maps-api (aside from the basic one on webcomponents.org)?
I have tested the google-maps web components for basic functionality and this works fine for me. However I need additional functionality of the google maps api, which isn't available in the google maps web component.
core-shared-lib.html:107
does a document.querySelector('script')
, which seems to look in the root dom for a script element. In my case, I don't have one - I just have <link rel='import'...>
tags. This results in :
Exception caught during observer callback: TypeError: Cannot read property 'parentNode' of null
at Object.Loader.addScript (http://localhost:8000/app/bower_components/core-shared-lib/core-shared-lib.html:108:8)
at Object.Loader (http://localhost:8000/app/bower_components/core-shared-lib/core-shared-lib.html:95:10)
at require (http://localhost:8000/app/bower_components/core-shared-lib/core-shared-lib.html:70:31)
at google-api-loader.Polymer.urlChanged (http://localhost:8000/app/bower_components/core-shared-lib/core-shared-lib.html:48:7)
at google-api-loader.g.invokeMethod (http://localhost:8000/app/bower_components/polymer/polymer.js:13:25932)
at google-api-loader.g.notifyPropertyChanges (http://localhost:8000/app/bower_components/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:8000/app/bower_components/polymer/polymer.js:12:18266)
at Object.S.check_ (http://localhost:8000/app/bower_components/polymer/polymer.js:12:22604)
at c (http://localhost:8000/app/bower_components/polymer/polymer.js:12:12173)
If I add an empty script tag to my index.html file, all is well.
Does this work with polymer 0.9 version?
When passing an object as a parameter to a cloud endpoint, it passes it as a payload and the app engine can't interpret it. However if you send each item of the object separately it works just fine.
Example:
The endpoint method
@ApiMethod(name = "setFavorite", httpMethod = "post")
public void setFavorite(Photo photo, @Named("user") String user) throws IOException {
log.log(Level.WARNING, photo.toString());
photo.setOwner(user);
Entity photoEntity = new Entity("Photo");
photoEntity.setProperty("photoId", photo.getPhotoId());
photoEntity.setProperty("ownerId", photo.getOwner());
photoEntity.setProperty("photoName", photo.getPhotoName());
photoEntity.setProperty("albumName", photo.getAlbumName());
photoEntity.setProperty("photoThumbnail", photo.getPhotoThumbnail());
photoEntity.setProperty("isFavorite", true);
photoEntity.setProperty("photoUrl", photo.getPhotoUrl());
datastore.put(photoEntity);
}
The photo object:
public String photoName;
public String photoUrl;
public String albumName;
public int photoNumber;
public String photoThumbnail;
public boolean isFavorite;
public String ownerId;
public String photoId;
public Key photoKey;
The code that only sends the user and sends the photo object as a payload(which doesnt work):
var photoApi = document.getElementById('photoApi');
var request = photoApi.api.setFavorite({
user: gapi.auth2.getAuthInstance().currentUser.get().getId(),
photo: _photo
});
The code that works:
var photoApi = document.getElementById('photoApi');
var request = photoApi.api.setFavorite({
user: gapi.auth2.getAuthInstance().currentUser.get().getId(),
photoName: _photo.photoName,
photoId: _photo.photoId,
albumName: _photo.albumName,
photoThumbnail: _photo.photoThumbnail,
isFavorite: true,
photoUrl: _photo.photoUrl
});
Is this expected behavior?
I've just spent about 2 hours figuring out why my app all of a sudden broke overnight. It took quite some time until I figured out that something broke due to an experimental update in the API.
I think the APIs should load a stable version by default.
This is potentially very dangerous. I've just realized this means my app has been online with a broken map search the whole time for a day... which is pretty terrible considering my site relies mostly on the autocomplete api :/
https://github.com/PolymerLabs/polymer-google-jsapi is similar, but different. I think it can easily be moved to this project and use the same core-shared-lib.
/cc @frankiefu
It currently fires an event.
But there's a case where you may miss the event, but want to check if the client-loader has finished loading its API.
Could we add a public boolean property to state it's been loaded?
Currently it's private:
// Stores whether the API client is done loading.
var _clientLoaded = false;
(My albeit sketchy understanding of javascript promises could help here. Yet there's no promises support in the library, from what I can tell, and putting the onus on the user to wrap something in a promise may be a little burdensome?)
google-maps-api.html - the script part of the example in the commented lines causes an "Unexpected token ILLEGAL"
For projects with a custom API on google cloud endpoints it would be nice if there was an api-key
property in google-client-loader
. That way I wouldn't have to set it myself through gapi.client.setApiKey("###API-KEY###");
when gapi.client has been loaded.
<google-client-loader id="myApi"
app-id="my-appengine-project"
name="myapi"
version="v1"
api-key="###API-KEY###">
</google-client-loader>
I can not make the Geocoder working. My code is as follows:
<google-maps-api apiKey="AIzaSyDjxTBnTFBRaztP4bAr-bl84Zk6qDxmb2Y"></google-maps-api>
var mapAPI = document.querySelector('google-maps-api');
var geocoder;
mapAPI.addEventListener('api-load', function(e) {
geocoder = mapAPI.api.Geocoder();
console.log("geocoder " + JSON.stringify(geocoder));
});
</script>
The console always says the geocoder is undefined
How can I use the geocoding service in this context? How can I call google.maps.geocoding(a,b)
function?
the root property is always set to the parents shadow root (or shady root) which causes problems at line 212:
if (this.root) {
root = this.root
} else if (this.appId) {
root = 'https://' + this.appId + '.appspot.com/_ah/api';
}
Somewhat related to #22
I have a page with multiple components that depend on google maps api - an input with place auto-complete and a map. So I have following tags on my page:
<google-maps-api on-api-load="_initAutocomplete"></google-maps-api>
<google-map latitude="[[latitude]]" longitude="[[longitude]]"></google-map>
The default value for libraries attribute on both google-maps-api and google-map is "places", so it should match. However I am getting the following error spit out in console and _initAutocomplete handler never fires:
k[bd].maps.Load is not a function
And if I take out the map tag the other works as expected. This feels like a common scenario to have some kind of geo-input and a map so I am wondering if it is supported and if so - what am I doing wrong? Thanks.
Due to the way the Maps API loads libraries (designed in the ancient days of ~2008) you have to load all the libraries you'll need on first load and can't load more libraries later. You also need to make sure the API is only loaded once on each page.
The second problem is taken care of by <google-maps-api>
but the first means that every other element that uses it needs to specify the same set of libraries as the rest for them to work on the same page together. This can be problematic if you're trying to make a SPA and have a need for different libraries in different parts of your app, or if you don't even realize an element you're using contains a <google-maps-api>
and so needs a libraries
property properly set. We leave it up to the end developer to coordinate this (see e.g. GoogleWebComponents/google-streetview-pano#15). Once you know the problem exists, it's easy to diagnose and fix, but it's annoying.
To eliminate these problems, I propose we always load all four libraries whenever the Maps API is loaded and eliminate the libraries
property on all google-map-*
elements. Configuration gets simpler, you don't have to repeat yourself over and over to use the exact same libraries you already loaded, and we eliminate a class of bugs. Boom.
Downsides:
Why the downsides aren't so bad:
main.js
script fileAny possible network performance problem should be fixed at the browser/Maps API/serving infrastructure levels anyways. We shouldn't burden all the google-map-*
components with this additional API complexity.
There is no way to configure the region of the map, so we cannot apply region restrictions:
https://developers.google.com/maps/documentation/javascript/localization#Region
I am stuck on Polymer 1 because of this dependency. Would really love to see an update. Thanks
There's no reason to setup a dom-module, shadow dom, etc. Everything should be done in JS.
When trying to access the geometry
API via $element.map.geometry
is undefined
.
According to the API Docs, this can happen when the libraries
parameter does not have geometry
. https://developers.google.com/maps/documentation/javascript/libraries
Although this https://github.com/GoogleWebComponents/google-apis/blob/master/google-maps-api.html#L115
seems to include all Libraries.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.