Polymer 3.x branch

.gitignore

@@ -1,2 +1,2 @@
-bower_components
+node_modules
 .idea

demo/index.html

@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Google Map demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../google-map.html">
-  <link rel="import" href="../google-map-marker.html">
-  <link rel="import" href="../google-map-poly.html">
-  <link rel="import" href="../google-map-directions.html">
+  <script type="module" src="../google-map.js"></script>
+  <script type="module" src="../google-map-marker.js"></script>
+  <script type="module" src="../google-map-poly.js"></script>
+  <script type="module" src="../google-map-directions.js"></script>
   <style>
     body {
       margin: 0;
@@ -45,7 +45,11 @@
 
 <button id="controlsToggle" onclick="toggleControls()">Toggle controls</button>
 
-<script>
+<script type="module">
+import '../google-map.js';
+import '../google-map-marker.js';
+import '../google-map-poly.js';
+import '../google-map-directions.js';
 var t = document.querySelector('template');
 if (location.origin === 'https://user-content-dot-custom-elements.appspot.com') {
   t.apiKey = 'AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc'; // TODO: update to your own API Key!

demo/kml.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Google Map Poly demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../google-map.html">
-  <link rel="import" href="../google-map-poly.html">
+  <script type="module" src="../google-map.js"></script>
+  <script type="module" src="../google-map-poly.js"></script>
   <style>
     body {
       margin: 0;
@@ -25,7 +25,9 @@
   <google-map latitude="41.876" longitude="-87.624" zoom="11" kml="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml" api-key="[[apiKey]]"></google-map>
 </template>
 
-<script>
+<script type="module">
+import '../google-map.js';
+import '../google-map-poly.js';
 if (location.origin === 'https://user-content-dot-custom-elements.appspot.com') {
   var t = document.querySelector('template');
   t.apiKey = 'AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc'; // TODO: update to your own API Key!

demo/polys.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Google Map Poly demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../google-map.html">
-  <link rel="import" href="../google-map-poly.html">
+  <script type="module" src="../google-map.js"></script>
+  <script type="module" src="../google-map-poly.js"></script>
   <style>
     body {
       margin: 0;
@@ -34,19 +34,21 @@
 
 <button id="toggleEdit" onclick="toggleEdit()">Enable editing</button>
 
-<script>
-  var poly = document.querySelector('google-map-poly');
-  var button = document.querySelector('#toggleEdit');
+<script type="module">
+import '../google-map.js';
+import '../google-map-poly.js';
+var poly = document.querySelector('google-map-poly');
+var button = document.querySelector('#toggleEdit');
 
-  function toggleEdit() {
-    poly.editable = !poly.editable;
-    button.innerText = poly.editable ? 'Disable editing' : 'Enable editing';
-  }
+function toggleEdit() {
+  poly.editable = !poly.editable;
+  button.innerText = poly.editable ? 'Disable editing' : 'Enable editing';
+}
 
-  if (location.origin === 'https://user-content-dot-custom-elements.appspot.com') {
-    var t = document.querySelector('template');
-    t.apiKey = 'AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc'; // TODO: update to your own API Key!
-  }
+if (location.origin === 'https://user-content-dot-custom-elements.appspot.com') {
+  var t = document.querySelector('template');
+  t.apiKey = 'AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc'; // TODO: update to your own API Key!
+}
 </script>
 </body>
 </html>

google-map-directions.js

@@ -0,0 +1,204 @@
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+
+/* Copyright (c) 2015 Google Inc. All rights reserved. */
+/*
+Provides the Google Maps API Directions Service to provide directions
+between a `startAddress` and `endAddress`.
+
+See https://developers.google.com/maps/documentation/javascript/directions for more
+information on the API.
+
+#### Example:
+
+    <template is="dom-bind">
+      <google-map-directions map="{{map}}"
+          start-address="San Francisco"
+          end-address="Mountain View"
+          travel-mode="BICYCLING"
+          waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'></google-map-directions>
+      <google-map map="{{map}}" latitude="37.779"
+                  longitude="-122.3892"></google-map>
+    </template>
+
+*/
+Polymer({
+  _template: html`
+    <style>
+      :host {
+        display: none;
+      }
+    </style>
+
+    <google-maps-api api-key="[[apiKey]]" language="[[language]]" on-api-load="_mapApiLoaded" maps-url="[[mapsUrl]]">
+    </google-maps-api>
+`,
+
+  is: 'google-map-directions',
+
+  /**
+   * Fired whenever the directions service returns a result.
+   *
+   * @event google-map-response
+   * @param {{response: Object}} detail
+   */
+
+  /**
+   * Polymer properties for the google-map-directions custom element.
+   */
+  properties: {
+    /**
+     * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key.
+     */
+    apiKey: String,
+
+    /**
+     * Overrides the origin the Maps API is loaded from. Defaults to `https://maps.googleapis.com`.
+     */
+    mapsUrl: {
+      type: String,
+      // Initial value set in google-maps-api.
+    },
+
+    /**
+     * The Google map object.
+     *
+     * @type google.maps.Map
+     */
+    map: {
+      type: Object,
+      observer: '_mapChanged',
+    },
+
+    /**
+     * Start address or latlng to get directions from.
+     *
+     * @type string|google.maps.LatLng
+     */
+    startAddress: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * End address or latlng for directions to end.
+     *
+     * @type string|google.maps.LatLng
+     */
+    endAddress: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * Travel mode to use.  One of 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'.
+     */
+    travelMode: {
+      type: String,
+      value: 'DRIVING',
+    },
+
+    /**
+     * Array of intermediate waypoints. Directions will be calculated
+     * from the origin to the destination by way of each waypoint in this array.
+     * The maximum allowed waypoints is 8, plus the origin, and destination.
+     * Maps API for Business customers are allowed 23 waypoints,
+     * plus the origin, and destination.
+     * Waypoints are not supported for transit directions. Optional.
+     *
+     * @type Array<google.maps.DirectionsWaypoint>
+     */
+    waypoints: {
+      type: Array,
+      value: [],
+    },
+
+    /**
+     * 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: null,
+    },
+
+    /**
+     * Options for the display of results
+     */
+    rendererOptions: {
+      type: Object,
+      value: {},
+    },
+
+    /**
+     * The response from the directions service.
+     *
+     */
+    response: {
+      type: Object,
+      observer: '_responseChanged',
+      notify: true,
+    },
+  },
+
+  observers: [
+    '_route(startAddress, endAddress, travelMode, waypoints.*)',
+  ],
+
+  _mapApiLoaded() {
+    this._route();
+  },
+
+  _responseChanged() {
+    if (this.directionsRenderer && this.response) {
+      this.directionsRenderer.setDirections(this.response);
+    }
+  },
+
+  _mapChanged() {
+    if (this.map && this.map instanceof google.maps.Map) {
+      if (!this.directionsRenderer) {
+        this.directionsRenderer = new google.maps.DirectionsRenderer(this.rendererOptions);
+      }
+      this.directionsRenderer.setMap(this.map);
+      this._responseChanged();
+    } else {
+      // If there is no more map, remove the directionsRenderer from the map and delete it.
+      if (this.directionsRenderer) {
+        this.directionsRenderer.setMap(null);
+        this.directionsRenderer = null;
+      }
+    }
+  },
+
+  _route() {
+    // Abort attempts to _route if the API is not available yet or the
+    // required attributes are blank.
+    if (typeof google === 'undefined' || typeof google.maps === 'undefined' ||
+        !this.startAddress || !this.endAddress) {
+      return;
+    }
+
+    // Construct a directionsService if necessary.
+    // Wait until here where the maps api has loaded and directions are actually needed.
+    if (!this.directionsService) {
+      this.directionsService = new google.maps.DirectionsService();
+    }
+
+    const request = {
+      origin: this.startAddress,
+      destination: this.endAddress,
+      travelMode: this.travelMode,
+      waypoints: this.waypoints,
+    };
+    this.directionsService.route(request, (response, status) => {
+      if (status == google.maps.DirectionsStatus.OK) {
+        this.response = response;
+        this.fire('google-map-response', { response });
+      }
+    });
+  },
+});

google-map-elements.js

@@ -0,0 +1,6 @@
+import './google-map.js';
+import './google-map-marker.js';
+import './google-map-directions.js';
+import './google-map-search.js';
+import './google-map-point.js';
+import './google-map-poly.js';

google-map-point.js

@@ -0,0 +1,52 @@
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+/* Copyright (c) 2015 Google Inc. All rights reserved. */
+/*
+The `google-map-point` element represents a point on a map. It's used as a child of other
+google-map-* elements.
+
+<b>Example</b>—points defining a semi-translucent blue triangle:
+
+    <google-map latitude="37.77493" longitude="-122.41942">
+      <google-map-poly closed fill-color="blue" fill-opacity=".5">
+        <google-map-point latitude="36.77493" longitude="-121.41942"></google-map-point>
+        <google-map-point latitude="38.77493" longitude="-122.41942"></google-map-point>
+        <google-map-point latitude="36.77493" longitude="-123.41942"></google-map-point>
+      </google-map-poly>
+    </google-map>
+*/
+Polymer({
+  is: 'google-map-point',
+
+  hostAttributes: { hidden: true },
+
+  properties: {
+    /**
+     * The point's longitude coordinate.
+     */
+    longitude: {
+      type: Number,
+      value: null,
+      notify: true,
+      reflectToAttribute: true,
+    },
+
+    /**
+     * The point's latitude coordinate.
+     */
+    latitude: {
+      type: Number,
+      value: null,
+      notify: true,
+      reflectToAttribute: true,
+    },
+  },
+
+  /**
+   * Returns the point as a Google Maps LatLng object.
+   *
+   * @return {google.maps.LatLng} The LatLng object.
+   */
+  getPosition() {
+    return new google.maps.LatLng(this.latitude, this.longitude);
+  },
+});

google-map-search.js

@@ -0,0 +1,209 @@
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+/* Copyright (c) 2015 Google Inc. All rights reserved. */
+/*
+`google-map-search` provides Google Maps Places API functionality.
+
+See https://developers.google.com/maps/documentation/javascript/places for more
+information on the API.
+
+#### Example:
+
+    <template is="dom-bind">
+      <google-map-search map="[[map]]" query="Pizza" results="{{results}}">
+      </google-map-search>
+      <google-map map="{{map}}" latitude="37.779"
+                  longitude="-122.3892">
+        <template is="dom-repeat" items="{{results}}" as="marker">
+          <google-map-marker latitude="{{marker.latitude}}"
+                             longitude="{{marker.longitude}}">
+            <h2>{{marker.name}}</h2>
+            <span>{{marker.formatted_address}}</span>
+          </google-map-marker>
+        </template>
+      </google-map>
+    </template>
+ */
+Polymer({
+  is: 'google-map-search',
+
+  properties: {
+    /**
+     * The Google map object.
+     *
+     * @type google.maps.Map
+     */
+    map: {
+      type: Object,
+      value: null,
+    },
+
+    /**
+     * The search query.
+     */
+    query: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * Latitude of the center of the search area.
+     * Ignored if `globalSearch` is true.
+     */
+    latitude: {
+      type: Number,
+      value: null,
+    },
+
+    /**
+     * Longitude of the center of the search area.
+     * Ignored if `globalSearch` is true.
+     */
+    longitude: {
+      type: Number,
+      value: null,
+    },
+
+    /**
+     * Search radius, in meters.
+     * If `latitude` and `longitude` are not specified,
+     * the center of the currently visible map area is used.
+     *
+     * If not set, search will be restricted to the currently visible
+     * map area, unless `globalSearch` is set to true.
+     */
+    radius: {
+      type: Number,
+      value: null,
+    },
+
+    /**
+     * By default, search is restricted to the currently visible map area.
+     * Set this to true to search everywhere.
+     *
+     * Ignored if `radius` is set.
+     */
+    globalSearch: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Space-separated list of result types.
+     * The search will only return results of the listed types.
+     * See https://developers.google.com/places/documentation/supported_types
+     * for a list of supported types.
+     * Leave empty or null to search for all result types.
+     */
+    types: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * The search results.
+     */
+    results: {
+      type: Array,
+      value() { return []; },
+      notify: true,
+    },
+
+    /**
+     * The lat/lng location.
+     */
+    location: {
+      type: Object,
+      value: null,
+      readOnly: true,
+    },
+  },
+
+  observers: [
+    'search(query,map,location,radius,types,globalSearch)',
+    '_updateLocation(latitude,longitude)',
+  ],
+
+  /**
+   * Fired when the details of a place are returned.
+   *
+   * @event google-map-search-place-detail
+   * @param {google.maps.MarkerPlace} detail The place details.
+   */
+
+  /**
+   * Fired when the search element returns a result.
+   *
+   * @event google-map-search-results
+   * @param {Array<{latitude: number, longitude: number}>} detail An array of search results
+   */
+
+  /**
+   * Perform a search using for `query` for the search term.
+   */
+  search() {
+    if (this.query && this.map) {
+      const places = new google.maps.places.PlacesService(this.map);
+
+      if (this.types && typeof this.types === 'string') {
+        var types = this.types.split(' ');
+      }
+      if (this.radius) {
+        var radius = this.radius;
+        var location = this.location ? this.location : this.map.getCenter();
+      } else if (!this.globalSearch) {
+        var bounds = this.map.getBounds();
+      }
+      places.textSearch({
+        query: this.query,
+        types,
+        bounds,
+        radius,
+        location,
+      }, this._gotResults.bind(this));
+    }
+  },
+
+  /**
+   * Fetches details for a given place.
+   *
+   * @param {String} placeId The place id.
+   * @return {Promise} place The place information.
+   */
+  getDetails(placeId) {
+    const places = new google.maps.places.PlacesService(this.map);
+
+    return new Promise(((resolve, reject) => {
+      places.getDetails({ placeId }, (place, status) => {
+        if (status === google.maps.places.PlacesServiceStatus.OK) {
+          resolve(place);
+          this.fire('google-map-search-place-detail', place);
+        } else {
+          reject(status);
+        }
+      });
+    }));
+  },
+
+  _gotResults(results, status) {
+    this.results = results.map((result) => {
+      // obtain lat/long from geometry
+      result.latitude = result.geometry.location.lat();
+      result.longitude = result.geometry.location.lng();
+      return result;
+    });
+    this.fire('google-map-search-results', this.results);
+  },
+
+  _updateLocation() {
+    if (!this.map) {
+      return;
+    } else if (typeof this.latitude !== 'number' || isNaN(this.latitude)) {
+      throw new TypeError('latitude must be a number');
+    } else if (typeof this.longitude !== 'number' || isNaN(this.longitude)) {
+      throw new TypeError('longitude must be a number');
+    }
+
+    // Update location. This will trigger a new search.
+    this._setLocation({ lat: this.latitude, lng: this.longitude });
+  },
+});

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@tadevel/polymer-google-map",
+  "flat": true,
+  "version": "3.0.0-pre.6",
+  "description": "Google Maps web components",
+  "contributors": [
+    "Frankie Fu <ffu@google.com>",
+    "Scott Miles <sjmiles@google.com>",
+    "Eric Bidelman <ebidel@gmail.com>",
+    "Ed Medvedev <edward.medvedev@gmail.com>",
+    "Alejandro Torrado <aletorrado@gmail.com>"
+  ],
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "google",
+    "apis",
+    "maps"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://elements.polymer-project.org/elements/google-map",
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0",
+    "@polymer/iron-resizable-behavior": "^3.0.0",
+    "@polymer/iron-selector": "^3.0.0",
+    "@tadevel/polymer-google-apis": "^3.0.0"
+  },
+  "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.0.0"
+  }
+}

test/google-map-basic.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
+  <script type="module" src="../google-map.js"></script>
 </head>
 <body>
 
@@ -16,7 +16,8 @@
               no-auto-tilt fit-to-markers single-info-window></google-map>
 
   <div id="newmap"></div>
-<script>
+<script type="module">
+import '../google-map.js';
 var map = document.querySelector('#map1');
 var map2 = document.querySelector('#map2');
 var map3 = document.querySelector('#map3');
@@ -86,7 +87,6 @@
   });
 
 });
-
 </script>
 </body>
 </html>

test/google-map-update-pos.html

@@ -6,13 +6,14 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
+  <script type="module" src="../google-map.js"></script>
 </head>
 <body>
 
   <google-map id="map" latitude="37.555" longitude="-122.555"></google-map>
 
-<script>
+<script type="module">
+import '../google-map.js';
 var map = document.querySelector('#map');
 
 suite('markers', function() {
@@ -35,7 +36,6 @@
   });
 
 });
-
 </script>
 </body>
 </html>

test/marker-basic.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
+  <script type="module" src="../google-map.js"></script>
 </head>
 <body>
 
@@ -16,7 +16,8 @@
     <google-map-marker slot="markers" id="labeled-marker" label="GG" latitude="37.777" longitude="-122.38911" drag-events></google-map-marker>
   </google-map>
 
-<script>
+<script type="module">
+import '../google-map.js';
 var map = document.querySelector('#map1');
 
 suite('markers', function() {
@@ -96,7 +97,6 @@
   });
 
 });
-
 </script>
 </body>
 </html>

test/markers-add-remove.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
+  <script type="module" src="../google-map.js"></script>
 </head>
 <body>
 
@@ -15,10 +15,11 @@
     <google-map-marker slot="markers" latitude="37.777" longitude="-122.38911"></google-map-marker>
   </google-map>
 
-<script>
+<script type="module">
+import '../google-map.js';
 var map = document.querySelector('#map1');
 
-suite(`markers${Polymer.Settings.useShadow ? ' (shadow dom)' : ' (shady dom)'}`, function() {
+suite(`markers${undefined.useShadow ? ' (shadow dom)' : ' (shady dom)'}`, function() {
 
   test('markers are defined, added, removed', function(done) {
     map.addEventListener('google-map-ready', function(e) {
@@ -45,7 +46,6 @@
   });
 
 });
-
 </script>
 </body>
 </html>

test/origin-tests.html

@@ -6,11 +6,12 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
+  <script type="module" src="../google-map.js"></script>
 </head>
 <body>
   <google-map id="map" maps-url="http://maps.google.cn/maps/api/js?callback=%%callback%%"></google-map>
-<script>
+<script type="module">
+import '../google-map.js';
 suite('google-map origins', function() {
 
   test('loads from another origin', function(done) {
@@ -26,7 +27,6 @@
     });
   });
 });
-
 </script>
 </body>
 </html>

test/poly-basic.html

@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
-  <link rel="import" href="../google-map-poly.html">
+  <script type="module" src="../google-map.js"></script>
+  <script type="module" src="../google-map-poly.js"></script>
 </head>
 <body>
 
@@ -20,7 +20,9 @@
     </google-map-poly>
   </google-map>
 
-<script>
+<script type="module">
+import '../google-map.js';
+import '../google-map-poly.js';
 suite('poly-basic', function(done) {
   var map = document.querySelector('#map');
   var poly = document.querySelector('#poly');
@@ -165,7 +167,6 @@
     });
   });
 });
-
 </script>
 </body>
 </html>

test/poly-custom-properties.html

@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../google-map.html">
-  <link rel="import" href="../google-map-poly.html">
+  <script type="module" src="../google-map.js"></script>
+  <script type="module" src="../google-map-poly.js"></script>
 </head>
 <body>
 
@@ -20,7 +20,9 @@
     </google-map-poly>
   </google-map>
 
-<script>
+<script type="module">
+import '../google-map.js';
+import '../google-map-poly.js';
 suite('poly-basic', function(done) {
   var map = document.querySelector('#map');
   var poly = document.querySelector('#poly');
@@ -75,7 +77,6 @@
     });
   });
 });
-
 </script>
 </body>
 </html>