<!-- Copyright (c) 2014 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at https://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at https://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-jsonp-library/iron-jsonp-library.html"> <script> /** Dynamically loads the Google Maps JavaScript API, firing the `api-load` event when ready. #### Example <google-maps-api api-key="abc123" version="3.exp"></google-maps-api> <script> var mapsAPI = document.querySelector('google-maps-api'); mapsAPI.addEventListener('api-load', function(e) { // this.api === google.maps }); <script> Any number of components can use `<google-maps-api>` elements, and the library will only be loaded once. @summary Element wrapper around Google Maps API. */ Polymer({ is: 'google-maps-api', behaviors: [ Polymer.IronJsonpLibraryBehavior ], properties: { /** @private */ mapsUrl: { type: String, value: 'https://maps.googleapis.com/maps/api/js?callback=%%callback%%' }, /** * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key. */ apiKey: { type: String, value: '' }, /** * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see developers.google.com/maps/documentation/business/. * If set, a Client ID will take precedence over an API Key. */ clientId: { type: String, value: '' }, /** * Version of the Maps API to use. */ version: { type: String, value: '3.exp' }, /** * The localized language to load the Maps API with. For more information * see https://developers.google.com/maps/documentation/javascript/basics#Language * * Note: the Maps API defaults to the preffered language setting of the browser. * Use this parameter to override that behavior. */ language: { type: String, value: '' }, /** * If true, sign-in is enabled. * See https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in */ signedIn: { type: Boolean, value: false }, /** * Fired when the Maps API library is loaded and ready. * @event api-load */ /** * Name of event fired when library is loaded and available. */ notifyEvent: { type: String, value: 'api-load' }, /** @private */ libraryUrl: { type: String, computed: '_computeUrl(mapsUrl, version, apiKey, clientId, language, signedIn)' } }, _computeUrl: function(mapsUrl, version, apiKey, clientId, language, signedIn) { var url = mapsUrl + '&v=' + version; // Always load all Maps API libraries. url += '&libraries=drawing,geometry,places,visualization'; if (apiKey && !clientId) { url += '&key=' + apiKey; } if (clientId) { url += '&client=' + clientId; } if (language) { url += '&language=' + language; } if (signedIn) { url += '&signed_in=' + signedIn; } return url; }, /** * Provides the google.maps JS API namespace. */ get api() { return google.maps; } }); </script>