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?

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 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.

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.

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:

1. We get an error: 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.
2. When trying to use methods from one instance of the API on the other (like the map) things get weird.
   For example, when trying to render a polyline from an encoded string (requires the geometry library) onto a <google-map map="{{gmap}}">, gmap is not considered by the geometry library as type Map.
   However, a map created manually without the <google-map> (and therefore doesn't use its own <google-maps-api>) works just fine.
   If I change the google-maps-api.html default value for libraries to "places,geometry", the geometry library works properly when used with google-map.

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)

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 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.

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';
            }

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?

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).

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:

• libraries are loaded as separate JS files, requiring four more network requests dependent on the bootstrap script loading and executing
• some amount of parse and initialization time for the libraries, even if unused (beyond what the JS engine has to do because of the way the Google Maps loader works)

Why the downsides aren't so bad:

• total download size of the four libraries is ~5.5KB with gzip (~9.5KB after unzip)
• there are already 15 scripts loaded with a vanilla Maps API load that we weren't worrying about before :)
• the library script downloads are launched immediately by the bootstrap script, in parallel to the main.js script file
• Maps API files are served with QUIC or HTTP2 or SPDY where available, so extra requests are multiplexed over an already open connection

Any 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.

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)

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).

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

Although 0.9 is still beta, it would be worth to update the dependencies.

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 :/

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'.

There's no reason to setup a dom-module, shadow dom, etc. Everything should be done in JS.

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.

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.

https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in

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.

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.

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.

Should this element be moved to https://github.com/GoogleWebComponents?

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?

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.

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>

So the libraries callback fix is in (#20).

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?)

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?

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:

• angular
• polymer:
  entry_points:
  • web/index.html

dependency_overrides:
browser: any
web_components: 0.4.0
analyzer: ">=0.15.6 <0.16.0"
html5lib: ">=0.11.0 <0.12.0"

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)})

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.

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.

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.

Does this work with polymer 0.9 version?

I am stuck on Polymer 1 because of this dependency. Would really love to see an update. Thanks

google-maps-api.html - the script part of the example in the commented lines causes an "Unexpected token ILLEGAL"