1<!-- 2Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt 4The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt 5The complete set of contributors may be found at https://polymer.github.io/CONTRIBUTORS.txt 6Code distributed by Google as part of the polymer project is also 7subject to an additional IP rights grant found at https://polymer.github.io/PATENTS.txt 8--> 9 10<link rel="import" href="../polymer/polymer.html"> 11<link rel="import" href="../iron-jsonp-library/iron-jsonp-library.html"> 12 13<!-- 14Dynamically loads the Google Maps JavaScript API, firing the `api-load` event when ready. 15 16#### Example 17 18 <google-maps-api api-key="abc123" version="3.exp"></google-maps-api> 19 <script> 20 var mapsAPI = document.querySelector('google-maps-api'); 21 mapsAPI.addEventListener('api-load', function(e) { 22 // this.api === google.maps 23 }); 24 </script> 25 26Any number of components can use `<google-maps-api>` elements, and the library will only be loaded once. 27 28@summary Element wrapper around Google Maps API. 29--> 30<script> 31 Polymer({ 32 33 is: 'google-maps-api', 34 35 behaviors: [ 36 Polymer.IronJsonpLibraryBehavior 37 ], 38 39 properties: { 40 41 /** @private */ 42 mapsUrl: { 43 type: String, 44 value: 'https://maps.googleapis.com/maps/api/js?callback=%%callback%%' 45 }, 46 47 /** 48 * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key. 49 */ 50 apiKey: { 51 type: String, 52 value: '' 53 }, 54 55 /** 56 * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see developers.google.com/maps/documentation/business/. 57 * If set, a Client ID will take precedence over an API Key. 58 */ 59 clientId: { 60 type: String, 61 value: '' 62 }, 63 64 /** 65 * Version of the Maps API to use. 66 */ 67 version: { 68 type: String, 69 value: '3.exp' 70 }, 71 72 /** 73 * The localized language to load the Maps API with. For more information 74 * see https://developers.google.com/maps/documentation/javascript/basics#Language 75 * 76 * Note: the Maps API defaults to the preffered language setting of the browser. 77 * Use this parameter to override that behavior. 78 */ 79 language: { 80 type: String, 81 value: '' 82 }, 83 /** 84 * If true, sign-in is enabled. 85 * See https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in 86 */ 87 signedIn: { 88 type: Boolean, 89 value: false 90 }, 91 92 /** 93 * Fired when the Maps API library is loaded and ready. 94 * @event api-load 95 */ 96 /** 97 * Name of event fired when library is loaded and available. 98 */ 99 notifyEvent: { 100 type: String, 101 value: 'api-load' 102 }, 103 104 /** @private */ 105 libraryUrl: { 106 type: String, 107 computed: '_computeUrl(mapsUrl, version, apiKey, clientId, language, signedIn)' 108 } 109 }, 110 111 _computeUrl: function(mapsUrl, version, apiKey, clientId, language, signedIn) { 112 var url = mapsUrl + '&v=' + version; 113 114 // Always load all Maps API libraries. 115 url += '&libraries=drawing,geometry,places,visualization'; 116 117 if (apiKey && !clientId) { 118 url += '&key=' + apiKey; 119 } 120 121 if (clientId) { 122 url += '&client=' + clientId; 123 } 124 125 // Log a warning if the user is not using an API Key or Client ID. 126 if (!apiKey && !clientId) { 127 var warning = 'No Google Maps API Key or Client ID specified. ' + 128 'See https://developers.google.com/maps/documentation/javascript/get-api-key ' + 129 'for instructions to get started with a key or client id.'; 130 console.warn(warning); 131 } 132 133 if (language) { 134 url += '&language=' + language; 135 } 136 137 if (signedIn) { 138 url += '&signed_in=' + signedIn; 139 } 140 return url; 141 }, 142 143 /** 144 * Provides the google.maps JS API namespace. 145 */ 146 get api() { 147 return google.maps; 148 } 149 }); 150</script> 151