From f40dc3f7924fb89e63fb3a090d70e4a1868dc89e Mon Sep 17 00:00:00 2001
From: Alejandro Torrado <aletorrado@gmail.com>
Date: Mon, 22 Oct 2018 16:59:59 -0300
Subject: [PATCH] Polymer 3.x branch
---
.gitignore | 2 +-
bower.json | 51 --
demo/index.html | 14 +-
demo/kml.html | 8 +-
demo/polys.html | 28 +-
google-map-directions.html | 217 --------
google-map-directions.js | 204 ++++++++
google-map-elements.html | 6 -
google-map-elements.js | 6 +
google-map-marker.html | 505 ------------------
google-map-marker.js | 452 ++++++++++++++++
google-map-point.html | 58 ---
google-map-point.js | 52 ++
google-map-poly.html | 603 ---------------------
google-map-poly.js | 573 ++++++++++++++++++++
google-map-search.html | 218 --------
google-map-search.js | 209 ++++++++
google-map.html | 863 -------------------------------
google-map.js | 855 ++++++++++++++++++++++++++++++
package.json | 32 ++
test/google-map-basic.html | 6 +-
test/google-map-update-pos.html | 6 +-
test/marker-basic.html | 6 +-
test/markers-add-remove.html | 8 +-
test/origin-tests.html | 6 +-
test/poly-basic.html | 9 +-
test/poly-custom-properties.html | 9 +-
27 files changed, 2439 insertions(+), 2567 deletions(-)
delete mode 100644 bower.json
delete mode 100644 google-map-directions.html
create mode 100644 google-map-directions.js
delete mode 100644 google-map-elements.html
create mode 100644 google-map-elements.js
delete mode 100644 google-map-marker.html
create mode 100644 google-map-marker.js
delete mode 100644 google-map-point.html
create mode 100644 google-map-point.js
delete mode 100644 google-map-poly.html
create mode 100644 google-map-poly.js
delete mode 100644 google-map-search.html
create mode 100644 google-map-search.js
delete mode 100644 google-map.html
create mode 100644 google-map.js
create mode 100644 package.json
diff --git a/.gitignore b/.gitignore
index 73102b8..eb79dd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-bower_components
+node_modules
.idea
diff --git a/bower.json b/bower.json
deleted file mode 100644
index ac446cd..0000000
--- a/bower.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
- "name": "google-map",
- "version": "2.0.5",
- "description": "Google Maps web components",
- "homepage": "https://elements.polymer-project.org/elements/google-map",
- "main": [
- "google-map-elements.html"
- ],
- "authors": [
- "Frankie Fu <ffu@google.com>",
- "Scott Miles <sjmiles@google.com>",
- "Eric Bidelman <ebidel@gmail.com>"
- ],
- "license": "Apache-2.0",
- "ignore": [
- "/.*",
- "/test/"
- ],
- "keywords": [
- "web-component",
- "web-components",
- "polymer",
- "google",
- "apis",
- "maps"
- ],
- "dependencies": {
- "polymer": "Polymer/polymer#1.9 - 2",
- "google-apis": "GoogleWebComponents/google-apis#1 - 2",
- "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2",
- "iron-selector": "PolymerElements/iron-selector#1 - 2"
- },
- "devDependencies": {
- "web-component-tester": "^6.0.0",
- "iron-component-page": "PolymerElements/iron-component-page#1 - 2"
- },
- "variants": {
- "1.x": {
- "dependencies": {
- "polymer": "Polymer/polymer#^1.9.0",
- "google-apis": "GoogleWebComponents/google-apis#^1.1.7",
- "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.5",
- "iron-selector": "PolymerElements/iron-selector#^1.5.2"
- },
- "devDependencies": {
- "web-component-tester": "^4.0.0",
- "iron-component-page": "PolymerElements/iron-component-page#^1.1.7"
- }
- }
- }
-}
diff --git a/demo/index.html b/demo/index.html
index 3e2c613..f5b24e4 100644
--- a/demo/index.html
+++ b/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!
diff --git a/demo/kml.html b/demo/kml.html
index 0524401..1da07fd 100644
--- a/demo/kml.html
+++ b/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!
diff --git a/demo/polys.html b/demo/polys.html
index 8c06ace..40f0a2f 100644
--- a/demo/polys.html
+++ b/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>
diff --git a/google-map-directions.html b/google-map-directions.html
deleted file mode 100644
index 47e1ebd..0000000
--- a/google-map-directions.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../google-apis/google-maps-api.html">
-
-<!--
-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>
-
--->
-
-<dom-module id="google-map-directions">
- <template>
- <style>
- :host {
- display: none;
- }
- </style>
-
- <google-maps-api
- api-key="[[apiKey]]"
- language="[[language]]"
- on-api-load="_mapApiLoaded"
- maps-url="[[mapsUrl]]">
- </google-maps-api>
- </template>
- <script>
- (function() {
- 'use strict';
-
- Polymer({
- 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: function() { return []; }
- },
-
- /**
- * 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: function() { return {}; }
- },
-
- /**
- * The response from the directions service.
- *
- */
- response: {
- type: Object,
- observer: '_responseChanged',
- notify: true
- }
- },
-
- observers: [
- '_route(startAddress, endAddress, travelMode, waypoints.*)'
- ],
-
- _mapApiLoaded: function() {
- this._route();
- },
-
- _responseChanged: function() {
- if (this.directionsRenderer && this.response) {
- this.directionsRenderer.setDirections(this.response);
- }
- },
-
- _mapChanged: function() {
- 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: function() {
- // 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();
- }
-
- var request = {
- origin: this.startAddress,
- destination: this.endAddress,
- travelMode: this.travelMode,
- waypoints: this.waypoints
- };
- this.directionsService.route(request, function(response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- this.response = response;
- this.fire('google-map-response', {response: response});
- }
- }.bind(this));
- }
- });
- })();
- </script>
-</dom-module>
diff --git a/google-map-directions.js b/google-map-directions.js
new file mode 100644
index 0000000..0a9b813
--- /dev/null
+++ b/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 });
+ }
+ });
+ },
+});
diff --git a/google-map-elements.html b/google-map-elements.html
deleted file mode 100644
index 3b372a9..0000000
--- a/google-map-elements.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<link rel="import" href="google-map.html">
-<link rel="import" href="google-map-marker.html">
-<link rel="import" href="google-map-directions.html">
-<link rel="import" href="google-map-search.html">
-<link rel="import" href="google-map-point.html">
-<link rel="import" href="google-map-poly.html">
diff --git a/google-map-elements.js b/google-map-elements.js
new file mode 100644
index 0000000..349d69c
--- /dev/null
+++ b/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';
diff --git a/google-map-marker.html b/google-map-marker.html
deleted file mode 100644
index 1900fa3..0000000
--- a/google-map-marker.html
+++ /dev/null
@@ -1,505 +0,0 @@
-<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../google-apis/google-maps-api.html">
-
-<!--
-The `google-map-marker` element represents a map marker. It is used as a
-child of `google-map`.
-
-<b>Example</b>:
-
- <google-map latitude="37.77493" longitude="-122.41942">
- <google-map-marker latitude="37.779" longitude="-122.3892"
- title="Go Giants!"></google-map-marker>
- </google-map>
-
-<b>Example</b> - marker with info window (children create the window content):
-
- <google-map-marker latitude="37.77493" longitude="-122.41942">
- <img src="image.png">
- </google-map-marker>
-
-<b>Example</b> - a draggable marker:
-
- <google-map-marker latitude="37.77493" longitude="-122.41942"
- draggable="true"></google-map-marker>
-
-<b>Example</b> - hide a marker:
-
- <google-map-marker latitude="37.77493" longitude="-122.41942"
- hidden></google-map-marker>
-
--->
-
-<dom-module id="google-map-marker">
- <template>
- <style>
- :host {
- display: none;
- }
- </style>
-
- <slot></slot>
- </template>
- <script>
- (function() {
-
-
- /**
- * @this {GoogleMapMarkerElement} This function is called with .bind(this) in the map
- * marker element below.
- */
- function setupDragHandler_() {
- if (this.draggable) {
- this.dragHandler_ = google.maps.event.addListener(
- this.marker, 'dragend', onDragEnd_.bind(this));
- } else {
- google.maps.event.removeListener(this.dragHandler_);
- this.dragHandler_ = null;
- }
- }
-
- /**
- * @this {GoogleMapMarkerElement} This function is called with .bind(this) in setupDragHandler
- *_above.
- */
- function onDragEnd_(e, details, sender) {
- this.latitude = e.latLng.lat();
- this.longitude = e.latLng.lng();
- }
-
- Polymer({
- is: 'google-map-marker',
-
- /**
- * Fired when the marker icon was clicked. Requires the clickEvents attribute to be true.
- *
- * @param {google.maps.MouseEvent} event The mouse event.
- * @event google-map-marker-click
- */
-
- /**
- * Fired when the marker icon was double clicked. Requires the clickEvents attribute to be true.
- *
- * @param {google.maps.MouseEvent} event The mouse event.
- * @event google-map-marker-dblclick
- */
-
- /**
- * Fired repeatedly while the user drags the marker. Requires the dragEvents attribute to be true.
- *
- * @event google-map-marker-drag
- */
-
- /**
- * Fired when the user stops dragging the marker. Requires the dragEvents attribute to be true.
- *
- * @event google-map-marker-dragend
- */
-
- /**
- * Fired when the user starts dragging the marker. Requires the dragEvents attribute to be true.
- *
- * @event google-map-marker-dragstart
- */
-
- /**
- * Fired for a mousedown on the marker. Requires the mouseEvents attribute to be true.
- *
- * @event google-map-marker-mousedown
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the DOM `mousemove` event is fired on the marker. Requires the mouseEvents
- * attribute to be true.
- *
- * @event google-map-marker-mousemove
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the mouse leaves the area of the marker icon. Requires the mouseEvents attribute to be
- * true.
- *
- * @event google-map-marker-mouseout
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the mouse enters the area of the marker icon. Requires the mouseEvents attribute to be
- * true.
- *
- * @event google-map-marker-mouseover
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired for a mouseup on the marker. Requires the mouseEvents attribute to be true.
- *
- * @event google-map-marker-mouseup
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired for a rightclick on the marker. Requires the clickEvents attribute to be true.
- *
- * @event google-map-marker-rightclick
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when an infowindow is opened.
- *
- * @event google-map-marker-open
- */
-
- /**
- * Fired when the close button of the infowindow is pressed.
- *
- * @event google-map-marker-close
- */
-
- properties: {
- /**
- * A Google Maps marker object.
- *
- * @type google.maps.Marker
- */
- marker: {
- type: Object,
- notify: true
- },
-
- /**
- * The Google map object.
- *
- * @type google.maps.Map
- */
- map: {
- type: Object,
- observer: '_mapChanged'
- },
-
- /**
- * A Google Map Infowindow object.
- *
- * @type {?Object}
- */
- info: {
- type: Object,
- value: null
- },
-
- /**
- * When true, marker *click events are automatically registered.
- */
- clickEvents: {
- type: Boolean,
- value: false,
- observer: '_clickEventsChanged'
- },
-
- /**
- * When true, marker drag* events are automatically registered.
- */
- dragEvents: {
- type: Boolean,
- value: false,
- observer: '_dragEventsChanged'
- },
-
- /**
- * Image URL for the marker icon.
- *
- * @type string|google.maps.Icon|google.maps.Symbol
- */
- icon: {
- type: Object,
- value: null,
- observer: '_iconChanged'
- },
-
- /**
- * When true, marker mouse* events are automatically registered.
- */
- mouseEvents: {
- type: Boolean,
- value: false,
- observer: '_mouseEventsChanged'
- },
-
- /**
- * Z-index for the marker icon.
- */
- zIndex: {
- type: Number,
- value: 0,
- observer: '_zIndexChanged'
- },
-
- /**
- * The marker's longitude coordinate.
- */
- longitude: {
- type: Number,
- value: null,
- notify: true
- },
-
- /**
- * The marker's latitude coordinate.
- */
- latitude: {
- type: Number,
- value: null,
- notify: true
- },
-
- /**
- * The marker's label.
- */
- label: {
- type: String,
- value: null,
- observer: '_labelChanged'
- },
-
- /**
- * A animation for the marker. "DROP" or "BOUNCE". See
- * https://developers.google.com/maps/documentation/javascript/examples/marker-animations.
- */
- animation: {
- type: String,
- value: null,
- observer: '_animationChanged'
- },
-
- /**
- * Specifies whether the InfoWindow is open or not
- */
- open: {
- type: Boolean,
- value: false,
- observer: '_openChanged'
- }
- },
-
- observers: [
- '_updatePosition(latitude, longitude)'
- ],
-
- detached: function() {
- if (this.marker) {
- google.maps.event.clearInstanceListeners(this.marker);
- this._listeners = {};
- this.marker.setMap(null);
- }
- if (this._contentObserver)
- this._contentObserver.disconnect();
- },
-
- attached: function() {
- // If element is added back to DOM, put it back on the map.
- if (this.marker) {
- this.marker.setMap(this.map);
- }
- },
-
- _updatePosition: function() {
- if (this.marker && this.latitude != null && this.longitude != null) {
- this.marker.setPosition(new google.maps.LatLng(
- parseFloat(this.latitude), parseFloat(this.longitude)));
- }
- },
-
- _clickEventsChanged: function() {
- if (this.map) {
- if (this.clickEvents) {
- this._forwardEvent('click');
- this._forwardEvent('dblclick');
- this._forwardEvent('rightclick');
- } else {
- this._clearListener('click');
- this._clearListener('dblclick');
- this._clearListener('rightclick');
- }
- }
- },
-
- _dragEventsChanged: function() {
- if (this.map) {
- if (this.dragEvents) {
- this._forwardEvent('drag');
- this._forwardEvent('dragend');
- this._forwardEvent('dragstart');
- } else {
- this._clearListener('drag');
- this._clearListener('dragend');
- this._clearListener('dragstart');
- }
- }
- },
-
- _mouseEventsChanged: function() {
- if (this.map) {
- if (this.mouseEvents) {
- this._forwardEvent('mousedown');
- this._forwardEvent('mousemove');
- this._forwardEvent('mouseout');
- this._forwardEvent('mouseover');
- this._forwardEvent('mouseup');
- } else {
- this._clearListener('mousedown');
- this._clearListener('mousemove');
- this._clearListener('mouseout');
- this._clearListener('mouseover');
- this._clearListener('mouseup');
- }
- }
- },
-
- _animationChanged: function() {
- if (this.marker) {
- this.marker.setAnimation(google.maps.Animation[this.animation]);
- }
- },
-
- _labelChanged: function() {
- if (this.marker) {
- this.marker.setLabel(this.label);
- }
- },
-
- _iconChanged: function() {
- if (this.marker) {
- this.marker.setIcon(this.icon);
- }
- },
-
- _zIndexChanged: function() {
- if (this.marker) {
- this.marker.setZIndex(this.zIndex);
- }
- },
-
- _mapChanged: function() {
- // Marker will be rebuilt, so disconnect existing one from old map and listeners.
- if (this.marker) {
- this.marker.setMap(null);
- google.maps.event.clearInstanceListeners(this.marker);
- }
-
- if (this.map && this.map instanceof google.maps.Map) {
- this._mapReady();
- }
- },
-
- _contentChanged: function() {
- if (this._contentObserver)
- this._contentObserver.disconnect();
- // Watch for future updates.
- this._contentObserver = new MutationObserver( this._contentChanged.bind(this));
- this._contentObserver.observe( this, {
- childList: true,
- subtree: true
- });
-
- var content = this.innerHTML.trim();
- if (content) {
- if (!this.info) {
- // Create a new infowindow
- this.info = new google.maps.InfoWindow();
- this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
- this.open = true;
- }.bind(this));
-
- this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function() {
- this.open = false;
- }.bind(this));
- }
- this.info.setContent(content);
- } else {
- if (this.info) {
- // Destroy the existing infowindow. It doesn't make sense to have an empty one.
- google.maps.event.removeListener(this.openInfoHandler_);
- google.maps.event.removeListener(this.closeInfoHandler_);
- this.info = null;
- }
- }
- },
-
- _openChanged: function() {
- if (this.info) {
- if (this.open) {
- this.info.open(this.map, this.marker);
- this.fire('google-map-marker-open');
- } else {
- this.info.close();
- this.fire('google-map-marker-close');
- }
- }
- },
-
- _mapReady: function() {
- this._listeners = {};
- this.marker = new google.maps.Marker({
- map: this.map,
- position: {
- lat: parseFloat(this.latitude),
- lng: parseFloat(this.longitude)
- },
- title: this.title,
- animation: google.maps.Animation[this.animation],
- draggable: this.draggable,
- visible: !this.hidden,
- icon: this.icon,
- label: this.label,
- zIndex: this.zIndex
- });
- this._contentChanged();
- this._clickEventsChanged();
- this._dragEventsChanged();
- this._mouseEventsChanged();
- this._openChanged();
- setupDragHandler_.bind(this)();
- },
-
- _clearListener: function(name) {
- if (this._listeners[name]) {
- google.maps.event.removeListener(this._listeners[name]);
- this._listeners[name] = null;
- }
- },
-
- _forwardEvent: function(name) {
- this._listeners[name] = google.maps.event.addListener(this.marker, name, function(event) {
- this.fire('google-map-marker-' + name, event);
- }.bind(this));
- },
-
- attributeChanged: function(attrName) {
- if (!this.marker) {
- return;
- }
-
- // Cannot use *Changed watchers for native properties.
- switch (attrName) {
- case 'hidden':
- this.marker.setVisible(!this.hidden);
- break;
- case 'draggable':
- this.marker.setDraggable(this.draggable);
- setupDragHandler_.bind(this)();
- break;
- case 'title':
- this.marker.setTitle(this.title);
- break;
- }
- }
- });
-
- })();
- </script>
-</dom-module>
diff --git a/google-map-marker.js b/google-map-marker.js
new file mode 100644
index 0000000..fc13132
--- /dev/null
+++ b/google-map-marker.js
@@ -0,0 +1,452 @@
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+
+function setupDragHandler_() {
+ if (this.draggable) {
+ this.dragHandler_ = google.maps.event.addListener(this.marker, 'dragend', onDragEnd_.bind(this));
+ } else {
+ google.maps.event.removeListener(this.dragHandler_);
+ this.dragHandler_ = null;
+ }
+}
+
+function onDragEnd_(e, details, sender) {
+ this.latitude = e.latLng.lat();
+ this.longitude = e.latLng.lng();
+}
+
+Polymer({
+ _template: html`
+ <style>
+ :host {
+ display: none;
+ }
+ </style>
+
+ <slot></slot>
+`,
+
+ is: 'google-map-marker',
+
+ /**
+ * Fired when the marker icon was clicked. Requires the clickEvents attribute to be true.
+ *
+ * @param {google.maps.MouseEvent} event The mouse event.
+ * @event google-map-marker-click
+ */
+
+ /**
+ * Fired when the marker icon was double clicked. Requires the clickEvents attribute to be true.
+ *
+ * @param {google.maps.MouseEvent} event The mouse event.
+ * @event google-map-marker-dblclick
+ */
+
+ /**
+ * Fired repeatedly while the user drags the marker. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-marker-drag
+ */
+
+ /**
+ * Fired when the user stops dragging the marker. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-marker-dragend
+ */
+
+ /**
+ * Fired when the user starts dragging the marker. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-marker-dragstart
+ */
+
+ /**
+ * Fired for a mousedown on the marker. Requires the mouseEvents attribute to be true.
+ *
+ * @event google-map-marker-mousedown
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the DOM `mousemove` event is fired on the marker. Requires the mouseEvents
+ * attribute to be true.
+ *
+ * @event google-map-marker-mousemove
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the mouse leaves the area of the marker icon. Requires the mouseEvents attribute to be
+ * true.
+ *
+ * @event google-map-marker-mouseout
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the mouse enters the area of the marker icon. Requires the mouseEvents attribute to be
+ * true.
+ *
+ * @event google-map-marker-mouseover
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired for a mouseup on the marker. Requires the mouseEvents attribute to be true.
+ *
+ * @event google-map-marker-mouseup
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired for a rightclick on the marker. Requires the clickEvents attribute to be true.
+ *
+ * @event google-map-marker-rightclick
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when an infowindow is opened.
+ *
+ * @event google-map-marker-open
+ */
+
+ /**
+ * Fired when the close button of the infowindow is pressed.
+ *
+ * @event google-map-marker-close
+ */
+
+ properties: {
+ /**
+ * A Google Maps marker object.
+ *
+ * @type google.maps.Marker
+ */
+ marker: {
+ type: Object,
+ notify: true,
+ },
+
+ /**
+ * The Google map object.
+ *
+ * @type google.maps.Map
+ */
+ map: {
+ type: Object,
+ observer: '_mapChanged',
+ },
+
+ /**
+ * A Google Map Infowindow object.
+ *
+ * @type {?Object}
+ */
+ info: {
+ type: Object,
+ value: null,
+ },
+
+ /**
+ * When true, marker *click events are automatically registered.
+ */
+ clickEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_clickEventsChanged',
+ },
+
+ /**
+ * When true, marker drag* events are automatically registered.
+ */
+ dragEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_dragEventsChanged',
+ },
+
+ /**
+ * Image URL for the marker icon.
+ *
+ * @type string|google.maps.Icon|google.maps.Symbol
+ */
+ icon: {
+ type: Object,
+ value: null,
+ observer: '_iconChanged',
+ },
+
+ /**
+ * When true, marker mouse* events are automatically registered.
+ */
+ mouseEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_mouseEventsChanged',
+ },
+
+ /**
+ * Z-index for the marker icon.
+ */
+ zIndex: {
+ type: Number,
+ value: 0,
+ observer: '_zIndexChanged',
+ },
+
+ /**
+ * The marker's longitude coordinate.
+ */
+ longitude: {
+ type: Number,
+ value: null,
+ notify: true,
+ },
+
+ /**
+ * The marker's latitude coordinate.
+ */
+ latitude: {
+ type: Number,
+ value: null,
+ notify: true,
+ },
+
+ /**
+ * The marker's label.
+ */
+ label: {
+ type: String,
+ value: null,
+ observer: '_labelChanged',
+ },
+
+ /**
+ * A animation for the marker. "DROP" or "BOUNCE". See
+ * https://developers.google.com/maps/documentation/javascript/examples/marker-animations.
+ */
+ animation: {
+ type: String,
+ value: null,
+ observer: '_animationChanged',
+ },
+
+ /**
+ * Specifies whether the InfoWindow is open or not
+ */
+ open: {
+ type: Boolean,
+ value: false,
+ observer: '_openChanged',
+ },
+ },
+
+ observers: [
+ '_updatePosition(latitude, longitude)',
+ ],
+
+ detached() {
+ if (this.marker) {
+ google.maps.event.clearInstanceListeners(this.marker);
+ this._listeners = {};
+ this.marker.setMap(null);
+ }
+ if (this._contentObserver) { this._contentObserver.disconnect(); }
+ },
+
+ attached() {
+ // If element is added back to DOM, put it back on the map.
+ if (this.marker) {
+ this.marker.setMap(this.map);
+ }
+ },
+
+ _updatePosition() {
+ if (this.marker && this.latitude != null && this.longitude != null) {
+ this.marker.setPosition(new google.maps.LatLng(parseFloat(this.latitude), parseFloat(this.longitude)));
+ }
+ },
+
+ _clickEventsChanged() {
+ if (this.map) {
+ if (this.clickEvents) {
+ this._forwardEvent('click');
+ this._forwardEvent('dblclick');
+ this._forwardEvent('rightclick');
+ } else {
+ this._clearListener('click');
+ this._clearListener('dblclick');
+ this._clearListener('rightclick');
+ }
+ }
+ },
+
+ _dragEventsChanged() {
+ if (this.map) {
+ if (this.dragEvents) {
+ this._forwardEvent('drag');
+ this._forwardEvent('dragend');
+ this._forwardEvent('dragstart');
+ } else {
+ this._clearListener('drag');
+ this._clearListener('dragend');
+ this._clearListener('dragstart');
+ }
+ }
+ },
+
+ _mouseEventsChanged() {
+ if (this.map) {
+ if (this.mouseEvents) {
+ this._forwardEvent('mousedown');
+ this._forwardEvent('mousemove');
+ this._forwardEvent('mouseout');
+ this._forwardEvent('mouseover');
+ this._forwardEvent('mouseup');
+ } else {
+ this._clearListener('mousedown');
+ this._clearListener('mousemove');
+ this._clearListener('mouseout');
+ this._clearListener('mouseover');
+ this._clearListener('mouseup');
+ }
+ }
+ },
+
+ _animationChanged() {
+ if (this.marker) {
+ this.marker.setAnimation(google.maps.Animation[this.animation]);
+ }
+ },
+
+ _labelChanged() {
+ if (this.marker) {
+ this.marker.setLabel(this.label);
+ }
+ },
+
+ _iconChanged() {
+ if (this.marker) {
+ this.marker.setIcon(this.icon);
+ }
+ },
+
+ _zIndexChanged() {
+ if (this.marker) {
+ this.marker.setZIndex(this.zIndex);
+ }
+ },
+
+ _mapChanged() {
+ // Marker will be rebuilt, so disconnect existing one from old map and listeners.
+ if (this.marker) {
+ this.marker.setMap(null);
+ google.maps.event.clearInstanceListeners(this.marker);
+ }
+
+ if (this.map && this.map instanceof google.maps.Map) {
+ this._mapReady();
+ }
+ },
+
+ _contentChanged() {
+ if (this._contentObserver) { this._contentObserver.disconnect(); }
+ // Watch for future updates.
+ this._contentObserver = new MutationObserver(this._contentChanged.bind(this));
+ this._contentObserver.observe(this, {
+ childList: true,
+ subtree: true,
+ });
+
+ const content = this.innerHTML.trim();
+ if (content) {
+ if (!this.info) {
+ // Create a new infowindow
+ this.info = new google.maps.InfoWindow();
+ this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', () => {
+ this.open = true;
+ });
+
+ this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', () => {
+ this.open = false;
+ });
+ }
+ this.info.setContent(content);
+ } else if (this.info) {
+ // Destroy the existing infowindow. It doesn't make sense to have an empty one.
+ google.maps.event.removeListener(this.openInfoHandler_);
+ google.maps.event.removeListener(this.closeInfoHandler_);
+ this.info = null;
+ }
+ },
+
+ _openChanged() {
+ if (this.info) {
+ if (this.open) {
+ this.info.open(this.map, this.marker);
+ this.fire('google-map-marker-open');
+ } else {
+ this.info.close();
+ this.fire('google-map-marker-close');
+ }
+ }
+ },
+
+ _mapReady() {
+ this._listeners = {};
+ this.marker = new google.maps.Marker({
+ map: this.map,
+ position: {
+ lat: parseFloat(this.latitude),
+ lng: parseFloat(this.longitude),
+ },
+ title: this.title,
+ animation: google.maps.Animation[this.animation],
+ draggable: this.draggable,
+ visible: !this.hidden,
+ icon: this.icon,
+ label: this.label,
+ zIndex: this.zIndex,
+ });
+ this._contentChanged();
+ this._clickEventsChanged();
+ this._dragEventsChanged();
+ this._mouseEventsChanged();
+ this._openChanged();
+ setupDragHandler_.bind(this)();
+ },
+
+ _clearListener(name) {
+ if (this._listeners[name]) {
+ google.maps.event.removeListener(this._listeners[name]);
+ this._listeners[name] = null;
+ }
+ },
+
+ _forwardEvent(name) {
+ this._listeners[name] = google.maps.event.addListener(this.marker, name, (event) => {
+ this.fire(`google-map-marker-${name}`, event);
+ });
+ },
+
+ attributeChanged(attrName) {
+ if (!this.marker) {
+ return;
+ }
+
+ // Cannot use *Changed watchers for native properties.
+ switch (attrName) {
+ case 'hidden':
+ this.marker.setVisible(!this.hidden);
+ break;
+ case 'draggable':
+ this.marker.setDraggable(this.draggable);
+ setupDragHandler_.bind(this)();
+ break;
+ case 'title':
+ this.marker.setTitle(this.title);
+ break;
+ }
+ },
+});
diff --git a/google-map-point.html b/google-map-point.html
deleted file mode 100644
index b3c7026..0000000
--- a/google-map-point.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../google-apis/google-maps-api.html">
-
-<!--
-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>
--->
-
-<script>
- (function() {
- 'use strict';
-
- Polymer({
- is: 'google-map-point',
-
- hostAttributes: {hidden: true},
-
- properties: {
- /**
- * The point's longitude coordinate.
- */
- longitude: {
- type: Number,
- value: null
- },
-
- /**
- * The point's latitude coordinate.
- */
- latitude: {
- type: Number,
- value: null
- }
- },
-
- /**
- * Returns the point as a Google Maps LatLng object.
- *
- * @return {google.maps.LatLng} The LatLng object.
- */
- getPosition: function() {
- return new google.maps.LatLng(this.latitude, this.longitude);
- }
- });
- })();
-</script>
diff --git a/google-map-point.js b/google-map-point.js
new file mode 100644
index 0000000..c232960
--- /dev/null
+++ b/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);
+ },
+});
diff --git a/google-map-poly.html b/google-map-poly.html
deleted file mode 100644
index 77e31ec..0000000
--- a/google-map-poly.html
+++ /dev/null
@@ -1,603 +0,0 @@
-<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../google-apis/google-maps-api.html">
-<link rel="import" href="google-map-point.html">
-
-<!--
-The `google-map-poly` element represents a series of connected line segments (aka a polyline) which
-may also be closed to form a polygon (provided there are at least three points). It is used as a
-child of `google-map` and will contain at least two `google-map-point` child elements.
-
-<b>Example</b>—a simple line:
-
- <google-map latitude="37.77493" longitude="-122.41942">
- <google-map-poly>
- <google-map-point latitude="37.77493" longitude="-122.41942"></google-map-point>
- <google-map-point latitude="38.77493" longitude="-123.41942"></google-map-point>
- </google-map-poly>
- </google-map>
-
-<b>Example</b>—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>
--->
-
-<dom-module id="google-map-poly">
- <template>
- <style>
- :host {
- display: none;
- }
- </style>
-
- <slot id="points"></slot>
- </template>
- <script>
- (function() {
- Polymer({
- is: 'google-map-poly',
-
- /**
- * Fired when the `path` property is built based on child `google-map-point` elements, either
- * initially or when they are changed.
- *
- * @event google-map-poly-path-built
- * @param {google.maps.MVCArray.<LatLng>} path The poly path.
- */
-
- /**
- * Fired when the user finishes adding vertices to the poly. The host component can use the
- * provided path to rebuild its list of points.
- *
- * @event google-map-poly-path-updated
- * @param {google.maps.MVCArray.<LatLng>} path The poly path.
- */
-
- /**
- * Fired when the DOM `click` event is fired on the poly. Requires the clickEvents and clickable attribute to
- * be true.
- *
- * @event google-map-poly-click
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired when the DOM `dblclick` event is fired on the poly. Requires the clickEvents and clickable attribute
- * to be true.
- *
- * @event google-map-poly-dblclick
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired repeatedly while the user drags the poly. Requires the dragEvents attribute to be true.
- *
- * @event google-map-poly-drag
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the user stops dragging the poly. Requires the dragEvents attribute to be true.
- *
- * @event google-map-poly-dragend
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the user starts dragging the poly. Requires the dragEvents attribute to be true.
- *
- * @event google-map-poly-dragstart
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the DOM `mousedown` event is fired on the poly. Requires the mouseEvents attribute
- * to be true.
- *
- * @event google-map-poly-mousedown
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired when the DOM `mousemove` event is fired on the poly. Requires the mouseEvents attribute
- * to be true.
- *
- * @event google-map-poly-mousemove
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired on poly mouseout. Requires the mouseEvents attribute to be true.
- *
- * @event google-map-poly-mouseout
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired on poly mouseover. Requires the mouseEvents attribute to be true.
- *
- * @event google-map-poly-mouseover
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired when the DOM `mouseup` event is fired on the poly. Requires the mouseEvents attribute
- * to be true.
- *
- * @event google-map-poly-mouseup
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Fired when the poly is right-clicked on. Requires the clickEvents attribute to be true.
- *
- * @event google-map-poly-rightclick
- * @param {google.maps.PolyMouseEvent} event The poly event.
- */
-
- /**
- * Polymer properties for the google-map-poly element.
- */
- properties: {
- /**
- * A Google Maps polyline or polygon object (depending on value of "closed" attribute).
- *
- * @type {google.maps.Polyline|google.maps.Polygon}
- */
- poly: {
- type: Object,
- readOnly: true
- },
-
- /**
- * An array of the Google Maps LatLng objects that define the poly shape.
- *
- * @type google.maps.MVCArray.<LatLng>
- */
- path: {
- type: Object,
- readOnly: true
- },
-
- /**
- * The Google map object.
- *
- * @type google.maps.Map
- */
- map: {
- type: Object,
- observer: '_mapChanged'
- },
-
- /**
- * When true, the poly will generate mouse events.
- */
- clickable: {
- type: Boolean,
- value: false,
- observer: '_clickableChanged'
- },
-
- /**
- * When true, the google-map-poly-*click events will be automatically registered.
- */
- clickEvents: {
- type: Boolean,
- value: false,
- observer: '_clickEventsChanged'
- },
-
- /**
- * When true, the path will be closed by connecting the last point to the first one and
- * treating the poly as a polygon.
- */
- closed: {
- type: Boolean,
- value: false,
- observer: '_closedChanged'
- },
-
- /**
- * When true, the poly may be dragged to a new position.
- */
- draggable: {
- type: Boolean,
- value: false,
- },
-
- /**
- * When true, the google-map-poly-drag* events will be automatically registered.
- */
- dragEvents: {
- type: Boolean,
- value: false,
- observer: '_dragEventsChanged'
- },
-
- /**
- * When true, the poly's vertices may be individually moved or new ones added.
- */
- editable: {
- type: Boolean,
- value: false,
- observer: '_editableChanged'
- },
-
- /**
- * When true, indicates that the user has begun editing the poly path (adding vertices).
- */
- editing: {
- type: Boolean,
- value: false,
- notify: true,
- readOnly: true
- },
-
- /**
- * If the path is closed, the polygon fill color. All CSS3 colors are supported except for
- * extended named colors.
- */
- fillColor: {
- type: String,
- value: '',
- observer: '_fillColorChanged'
- },
-
- /**
- * If the path is closed, the polygon fill opacity (between 0.0 and 1.0).
- */
- fillOpacity: {
- type: Number,
- value: 0,
- observer: '_fillOpacityChanged'
- },
-
- /**
- * When true, the poly's edges are interpreted as geodesic and will follow the curvature of
- * the Earth. When not set, the poly's edges are rendered as straight lines in screen space.
- * Note that the poly of a geodesic poly may appear to change when dragged, as the dimensions
- * are maintained relative to the surface of the earth.
- */
- geodesic: {
- type: Boolean,
- value: false,
- observer: '_geodesicChanged'
- },
-
- /**
- * If the path is not closed, the icons to be rendered along the polyline.
- */
- icons: {
- type: Array,
- value: null,
- observer: '_iconsChanged'
- },
-
- /**
- * When true, the google-map-poly-mouse* events will be automatically registered.
- */
- mouseEvents: {
- type: Boolean,
- value: false,
- observer: '_mouseEventsChanged'
- },
-
- /**
- * The color to draw the poly's stroke with. All CSS3 colors are supported except for extended
- * named colors.
- */
- strokeColor: {
- type: String,
- value: 'black',
- observer: '_strokeColorChanged'
- },
-
- /**
- * The stroke opacity (between 0.0 and 1.0).
- */
- strokeOpacity: {
- type: Number,
- value: 1,
- observer: '_strokeOpacityChanged'
- },
-
- /**
- * The stroke position (center, inside, or outside).
- */
- strokePosition: {
- type: String,
- value: 'center',
- observer: '_strokePositionChanged'
- },
-
- /**
- * The stroke width in pixels.
- */
- strokeWeight: {
- type: Number,
- value: 3,
- observer: '_strokeWeightChanged'
- },
-
- /**
- * The Z-index relative to other objects on the map.
- */
- zIndex: {
- type: Number,
- value: 0,
- observer: '_zIndexChanged'
- }
- },
-
- // Lifecycle event handlers.
-
- detached: function() {
- this.poly.setMap(null);
- if (this._pointsObserver) {
- this._pointsObserver.disconnect();
- this._pointsObserver = null;
- }
- for (var name in this._listeners) {
- this._clearListener(name);
- }
- },
-
- attached: function() {
- // If element is added back to DOM, put it back on the map.
- this.poly && this.poly.setMap(this.map);
- },
-
- // Attribute/property change watchers.
-
- attributeChanged: function(attrName) {
- if (!this.poly) {
- return;
- }
-
- // Cannot use *Changed watchers for native properties.
- switch (attrName) {
- case 'hidden':
- this.poly.setVisible(!this.hidden);
- break;
- case 'draggable':
- this.poly.setDraggable(this.draggable);
- break;
- }
- },
-
- _clickableChanged: function() {
- this.poly && this.poly.set('clickable', this.clickable);
- },
-
- _clickEventsChanged: function() {
- if (this.poly) {
- if (this.clickEvents) {
- this._forwardEvent('click');
- this._forwardEvent('dblclick');
- this._forwardEvent('rightclick');
- } else {
- this._clearListener('click');
- this._clearListener('dblclick');
- this._clearListener('rightclick');
- }
- }
- },
-
- _closedChanged: function() {
- this._mapChanged();
- },
-
- _dragEventsChanged: function() {
- if (this.poly) {
- if (this.clickEvents) {
- this._forwardEvent('drag');
- this._forwardEvent('dragend');
- this._forwardEvent('dragstart');
- } else {
- this._clearListener('drag');
- this._clearListener('dragend');
- this._clearListener('dragstart');
- }
- }
- },
-
- _editableChanged: function() {
- this.poly && this.poly.setEditable(this.editable);
- },
-
- _fillColorChanged: function() {
- this.poly && this.poly.set('fillColor', this.fillColor);
- },
-
- _fillOpacityChanged: function() {
- this.poly && this.poly.set('fillOpacity', this.fillOpacity);
- },
-
- _geodesicChanged: function() {
- this.poly && this.poly.set('geodesic', this.geodesic);
- },
-
- _iconsChanged: function() {
- this.poly && this.poly.set('icons', this.icons);
- },
-
- _mapChanged: function() {
- // Poly will be rebuilt, so disconnect existing one from old map and listeners.
- if (this.poly) {
- this.poly.setMap(null);
- google.maps.event.clearInstanceListeners(this.poly);
- }
-
- if (this.map && this.map instanceof google.maps.Map) {
- this._createPoly();
- }
- },
-
- _mouseEventsChanged: function() {
- if (this.poly) {
- if (this.mouseEvents) {
- this._forwardEvent('mousedown');
- this._forwardEvent('mousemove');
- this._forwardEvent('mouseout');
- this._forwardEvent('mouseover');
- this._forwardEvent('mouseup');
- } else {
- this._clearListener('mousedown');
- this._clearListener('mousemove');
- this._clearListener('mouseout');
- this._clearListener('mouseover');
- this._clearListener('mouseup');
- }
- }
- },
-
- _strokeColorChanged: function() {
- this.poly && this.poly.set('strokeColor', this.strokeColor);
- },
-
- _strokeOpacityChanged: function() {
- this.poly && this.poly.set('strokeOpacity', this.strokeOpacity);
- },
-
- _strokePositionChanged: function() {
- this.poly && this.poly.set('strokePosition', this._convertStrokePosition());
- },
-
- _strokeWeightChanged: function() {
- this.poly && this.poly.set('strokeWeight', this.strokeWeight);
- },
-
- _zIndexChanged: function() {
- this.poly && this.poly.set('zIndex', this.zIndex);
- },
-
- // Helper logic.
-
- _buildPathFromPoints: function() {
- this._points = Array.prototype.slice.call(Polymer.dom(this.$.points).getDistributedNodes());
-
- // Build path from current points (ignoring vertex insertions while doing so).
- this._building = true;
- this.path.clear();
- for (var i = 0, point; point = this._points[i]; ++i) {
- var tagName = point.tagName;
-
- if (tagName) {
- tagName = tagName.toLowerCase();
-
- if (tagName == 'google-map-point') {
- this.path.push(point.getPosition());
- }
- }
- }
- this._building = false;
-
- this.fire('google-map-poly-path-built', this.path);
-
- // Watch for future updates.
- if (this._pointsObserver) {
- return;
- }
- this._pointsObserver = new MutationObserver(this._buildPathFromPoints.bind(this));
- this._pointsObserver.observe(this, {
- childList: true
- });
- },
-
- _clearListener: function(name) {
- if (this._listeners[name]) {
- google.maps.event.removeListener(this._listeners[name]);
- this._listeners[name] = null;
- }
- },
-
- _convertStrokePosition: function() {
- return google.maps.StrokePosition && this.strokePosition ?
- google.maps.StrokePosition[this.strokePosition.toUpperCase()] : 0;
- },
-
- _createPoly: function() {
- // Build poly's path and register mutation listeners on first creation.
- if (!this.path) {
- this._setPath(new google.maps.MVCArray());
- google.maps.event.addListener(this.path, 'insert_at', this._startEditing.bind(this));
- google.maps.event.addListener(this.path, 'set_at', this._updatePoint.bind(this));
- this._buildPathFromPoints();
- }
-
- var options = {
- clickable: this.clickable || this.draggable, // draggable must be clickable to work.
- draggable: this.draggable,
- editable: this.editable,
- geodesic: this.geodesic,
- map: this.map,
- path: this.path,
- strokeColor: this.strokeColor,
- strokeOpacity: this.strokeOpacity,
- strokePosition: this._convertStrokePosition(),
- strokeWeight: this.strokeWeight,
- visible: !this.hidden,
- zIndex: this.zIndex
- };
-
- if (this.closed) {
- options.fillColor = this.fillColor;
- options.fillOpacity = this.fillOpacity;
- this._setPoly(new google.maps.Polygon(options));
- } else {
- options.icons = this.icons;
- this._setPoly(new google.maps.Polyline(options));
- }
-
- this._listeners = {};
- this._clickEventsChanged();
- this._mouseEventsChanged();
- this._dragEventsChanged();
- },
-
- _forwardEvent: function(name) {
- this._listeners[name] = google.maps.event.addListener(this.poly, name, function(event) {
- this.fire('google-map-poly-' + name, event);
- }.bind(this));
- },
-
- _startEditing: function(index) {
- if (this._building) {
- // Ignore changes while building path.
- return;
- }
-
- // Signal start of editing when first vertex inserted, end when map clicked.
- if (!this.editing) {
- this._setEditing(true);
- // The poly path and google-map-point elements lose sync once the user starts adding points,
- // so invalidate the _points array.
- this._points = null;
- google.maps.event.addListenerOnce(this.map, 'click', function() {
- this._setEditing(false);
- this.fire('google-map-poly-path-updated', this.path);
- }.bind(this));
- }
- },
-
- _updatePoint: function(index, vertex) {
- // Ignore changes if path is out of sync with google-map-point elements.
- if (!this._points) {
- return;
- }
-
- // Update existing point so bound properties are updated. too.
- this._points[index].latitude = vertex.lat();
- this._points[index].longitude = vertex.lng();
- }
- });
- })();
- </script>
-</dom-module>
diff --git a/google-map-poly.js b/google-map-poly.js
new file mode 100644
index 0000000..3c80fe4
--- /dev/null
+++ b/google-map-poly.js
@@ -0,0 +1,573 @@
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import './google-map-point.js';
+
+Polymer({
+ _template: html`
+ <style>
+ :host {
+ display: none;
+ }
+ </style>
+
+ <slot id="points"></slot>
+`,
+
+ is: 'google-map-poly',
+
+ /**
+ * Fired when the `path` property is built based on child `google-map-point` elements, either
+ * initially or when they are changed.
+ *
+ * @event google-map-poly-path-built
+ * @param {google.maps.MVCArray.<LatLng>} path The poly path.
+ */
+
+ /**
+ * Fired when the user finishes adding vertices to the poly. The host component can use the
+ * provided path to rebuild its list of points.
+ *
+ * @event google-map-poly-path-updated
+ * @param {google.maps.MVCArray.<LatLng>} path The poly path.
+ */
+
+ /**
+ * Fired when the DOM `click` event is fired on the poly. Requires the clickEvents and clickable attribute to
+ * be true.
+ *
+ * @event google-map-poly-click
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired when the DOM `dblclick` event is fired on the poly. Requires the clickEvents and clickable attribute
+ * to be true.
+ *
+ * @event google-map-poly-dblclick
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired repeatedly while the user drags the poly. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-poly-drag
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the user stops dragging the poly. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-poly-dragend
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the user starts dragging the poly. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-poly-dragstart
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the DOM `mousedown` event is fired on the poly. Requires the mouseEvents attribute
+ * to be true.
+ *
+ * @event google-map-poly-mousedown
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired when the DOM `mousemove` event is fired on the poly. Requires the mouseEvents attribute
+ * to be true.
+ *
+ * @event google-map-poly-mousemove
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired on poly mouseout. Requires the mouseEvents attribute to be true.
+ *
+ * @event google-map-poly-mouseout
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired on poly mouseover. Requires the mouseEvents attribute to be true.
+ *
+ * @event google-map-poly-mouseover
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired when the DOM `mouseup` event is fired on the poly. Requires the mouseEvents attribute
+ * to be true.
+ *
+ * @event google-map-poly-mouseup
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Fired when the poly is right-clicked on. Requires the clickEvents attribute to be true.
+ *
+ * @event google-map-poly-rightclick
+ * @param {google.maps.PolyMouseEvent} event The poly event.
+ */
+
+ /**
+ * Polymer properties for the google-map-poly element.
+ */
+ properties: {
+ /**
+ * A Google Maps polyline or polygon object (depending on value of "closed" attribute).
+ *
+ * @type {google.maps.Polyline|google.maps.Polygon}
+ */
+ poly: {
+ type: Object,
+ readOnly: true,
+ },
+
+ /**
+ * An array of the Google Maps LatLng objects that define the poly shape.
+ *
+ * @type google.maps.MVCArray.<LatLng>
+ */
+ path: {
+ type: Object,
+ readOnly: true,
+ },
+
+ /**
+ * The Google map object.
+ *
+ * @type google.maps.Map
+ */
+ map: {
+ type: Object,
+ observer: '_mapChanged',
+ },
+
+ /**
+ * When true, the poly will generate mouse events.
+ */
+ clickable: {
+ type: Boolean,
+ value: false,
+ observer: '_clickableChanged',
+ },
+
+ /**
+ * When true, the google-map-poly-*click events will be automatically registered.
+ */
+ clickEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_clickEventsChanged',
+ },
+
+ /**
+ * When true, the path will be closed by connecting the last point to the first one and
+ * treating the poly as a polygon.
+ */
+ closed: {
+ type: Boolean,
+ value: false,
+ observer: '_closedChanged',
+ },
+
+ /**
+ * When true, the poly may be dragged to a new position.
+ */
+ draggable: {
+ type: Boolean,
+ value: false,
+ },
+
+ /**
+ * When true, the google-map-poly-drag* events will be automatically registered.
+ */
+ dragEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_dragEventsChanged',
+ },
+
+ /**
+ * When true, the poly's vertices may be individually moved or new ones added.
+ */
+ editable: {
+ type: Boolean,
+ value: false,
+ observer: '_editableChanged',
+ },
+
+ /**
+ * When true, indicates that the user has begun editing the poly path (adding vertices).
+ */
+ editing: {
+ type: Boolean,
+ value: false,
+ notify: true,
+ readOnly: true,
+ },
+
+ /**
+ * If the path is closed, the polygon fill color. All CSS3 colors are supported except for
+ * extended named colors.
+ */
+ fillColor: {
+ type: String,
+ value: '',
+ observer: '_fillColorChanged',
+ },
+
+ /**
+ * If the path is closed, the polygon fill opacity (between 0.0 and 1.0).
+ */
+ fillOpacity: {
+ type: Number,
+ value: 0,
+ observer: '_fillOpacityChanged',
+ },
+
+ /**
+ * When true, the poly's edges are interpreted as geodesic and will follow the curvature of
+ * the Earth. When not set, the poly's edges are rendered as straight lines in screen space.
+ * Note that the poly of a geodesic poly may appear to change when dragged, as the dimensions
+ * are maintained relative to the surface of the earth.
+ */
+ geodesic: {
+ type: Boolean,
+ value: false,
+ observer: '_geodesicChanged',
+ },
+
+ /**
+ * If the path is not closed, the icons to be rendered along the polyline.
+ */
+ icons: {
+ type: Array,
+ value: null,
+ observer: '_iconsChanged',
+ },
+
+ /**
+ * When true, the google-map-poly-mouse* events will be automatically registered.
+ */
+ mouseEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_mouseEventsChanged',
+ },
+
+ /**
+ * The color to draw the poly's stroke with. All CSS3 colors are supported except for extended
+ * named colors.
+ */
+ strokeColor: {
+ type: String,
+ value: 'black',
+ observer: '_strokeColorChanged',
+ },
+
+ /**
+ * The stroke opacity (between 0.0 and 1.0).
+ */
+ strokeOpacity: {
+ type: Number,
+ value: 1,
+ observer: '_strokeOpacityChanged',
+ },
+
+ /**
+ * The stroke position (center, inside, or outside).
+ */
+ strokePosition: {
+ type: String,
+ value: 'center',
+ observer: '_strokePositionChanged',
+ },
+
+ /**
+ * The stroke width in pixels.
+ */
+ strokeWeight: {
+ type: Number,
+ value: 3,
+ observer: '_strokeWeightChanged',
+ },
+
+ /**
+ * The Z-index relative to other objects on the map.
+ */
+ zIndex: {
+ type: Number,
+ value: 0,
+ observer: '_zIndexChanged',
+ },
+ },
+
+ // Lifecycle event handlers.
+
+ detached() {
+ this.poly.setMap(null);
+ if (this._pointsObserver) {
+ this._pointsObserver.disconnect();
+ this._pointsObserver = null;
+ }
+ for (const name in this._listeners) {
+ this._clearListener(name);
+ }
+ },
+
+ attached() {
+ // If element is added back to DOM, put it back on the map.
+ this.poly && this.poly.setMap(this.map);
+ },
+
+ // Attribute/property change watchers.
+
+ attributeChanged(attrName) {
+ if (!this.poly) {
+ return;
+ }
+
+ // Cannot use *Changed watchers for native properties.
+ switch (attrName) {
+ case 'hidden':
+ this.poly.setVisible(!this.hidden);
+ break;
+ case 'draggable':
+ this.poly.setDraggable(this.draggable);
+ break;
+ }
+ },
+
+ _clickableChanged() {
+ this.poly && this.poly.set('clickable', this.clickable);
+ },
+
+ _clickEventsChanged() {
+ if (this.poly) {
+ if (this.clickEvents) {
+ this._forwardEvent('click');
+ this._forwardEvent('dblclick');
+ this._forwardEvent('rightclick');
+ } else {
+ this._clearListener('click');
+ this._clearListener('dblclick');
+ this._clearListener('rightclick');
+ }
+ }
+ },
+
+ _closedChanged() {
+ this._mapChanged();
+ },
+
+ _dragEventsChanged() {
+ if (this.poly) {
+ if (this.clickEvents) {
+ this._forwardEvent('drag');
+ this._forwardEvent('dragend');
+ this._forwardEvent('dragstart');
+ } else {
+ this._clearListener('drag');
+ this._clearListener('dragend');
+ this._clearListener('dragstart');
+ }
+ }
+ },
+
+ _editableChanged() {
+ this.poly && this.poly.setEditable(this.editable);
+ },
+
+ _fillColorChanged() {
+ this.poly && this.poly.set('fillColor', this.fillColor);
+ },
+
+ _fillOpacityChanged() {
+ this.poly && this.poly.set('fillOpacity', this.fillOpacity);
+ },
+
+ _geodesicChanged() {
+ this.poly && this.poly.set('geodesic', this.geodesic);
+ },
+
+ _iconsChanged() {
+ this.poly && this.poly.set('icons', this.icons);
+ },
+
+ _mapChanged() {
+ // Poly will be rebuilt, so disconnect existing one from old map and listeners.
+ if (this.poly) {
+ this.poly.setMap(null);
+ google.maps.event.clearInstanceListeners(this.poly);
+ }
+
+ if (this.map && this.map instanceof google.maps.Map) {
+ this._createPoly();
+ }
+ },
+
+ _mouseEventsChanged() {
+ if (this.poly) {
+ if (this.mouseEvents) {
+ this._forwardEvent('mousedown');
+ this._forwardEvent('mousemove');
+ this._forwardEvent('mouseout');
+ this._forwardEvent('mouseover');
+ this._forwardEvent('mouseup');
+ } else {
+ this._clearListener('mousedown');
+ this._clearListener('mousemove');
+ this._clearListener('mouseout');
+ this._clearListener('mouseover');
+ this._clearListener('mouseup');
+ }
+ }
+ },
+
+ _strokeColorChanged() {
+ this.poly && this.poly.set('strokeColor', this.strokeColor);
+ },
+
+ _strokeOpacityChanged() {
+ this.poly && this.poly.set('strokeOpacity', this.strokeOpacity);
+ },
+
+ _strokePositionChanged() {
+ this.poly && this.poly.set('strokePosition', this._convertStrokePosition());
+ },
+
+ _strokeWeightChanged() {
+ this.poly && this.poly.set('strokeWeight', this.strokeWeight);
+ },
+
+ _zIndexChanged() {
+ this.poly && this.poly.set('zIndex', this.zIndex);
+ },
+
+ // Helper logic.
+
+ _buildPathFromPoints() {
+ this._points = Array.prototype.slice.call(this.$.points.assignedNodes({ flatten: true }))
+ .filter(n => n.nodeName !== '#text');
+
+ // Build path from current points (ignoring vertex insertions while doing so).
+ this._building = true;
+ this.path.clear();
+ for (var i = 0, point; point = this._points[i]; ++i) {
+ let tagName = point.tagName;
+
+ if (tagName) {
+ tagName = tagName.toLowerCase();
+
+ if (tagName == 'google-map-point') {
+ this.path.push(point.getPosition());
+ }
+ }
+ }
+ this._building = false;
+
+ this.fire('google-map-poly-path-built', this.path);
+
+ // Watch for future updates.
+ if (this._pointsObserver) {
+ return;
+ }
+ this._pointsObserver = new MutationObserver(this._buildPathFromPoints.bind(this));
+ this._pointsObserver.observe(this, {
+ subtree: true,
+ attributes: true,
+ });
+ },
+
+ _clearListener(name) {
+ if (this._listeners[name]) {
+ google.maps.event.removeListener(this._listeners[name]);
+ this._listeners[name] = null;
+ }
+ },
+
+ _convertStrokePosition() {
+ return google.maps.StrokePosition && this.strokePosition ?
+ google.maps.StrokePosition[this.strokePosition.toUpperCase()] : 0;
+ },
+
+ _createPoly() {
+ // Build poly's path and register mutation listeners on first creation.
+ if (!this.path) {
+ this._setPath(new google.maps.MVCArray());
+ google.maps.event.addListener(this.path, 'insert_at', this._startEditing.bind(this));
+ google.maps.event.addListener(this.path, 'set_at', this._updatePoint.bind(this));
+ this._buildPathFromPoints();
+ }
+
+ const options = {
+ clickable: this.clickable || this.draggable, // draggable must be clickable to work.
+ draggable: this.draggable,
+ editable: this.editable,
+ geodesic: this.geodesic,
+ map: this.map,
+ path: this.path,
+ strokeColor: this.strokeColor,
+ strokeOpacity: this.strokeOpacity,
+ strokePosition: this._convertStrokePosition(),
+ strokeWeight: this.strokeWeight,
+ visible: !this.hidden,
+ zIndex: this.zIndex,
+ };
+
+ if (this.closed) {
+ options.fillColor = this.fillColor;
+ options.fillOpacity = this.fillOpacity;
+ this._setPoly(new google.maps.Polygon(options));
+ } else {
+ options.icons = this.icons;
+ this._setPoly(new google.maps.Polyline(options));
+ }
+
+ this._listeners = {};
+ this._clickEventsChanged();
+ this._mouseEventsChanged();
+ this._dragEventsChanged();
+ },
+
+ _forwardEvent(name) {
+ this._listeners[name] = google.maps.event.addListener(this.poly, name, (event) => {
+ this.fire(`google-map-poly-${name}`, event);
+ });
+ },
+
+ _startEditing(index) {
+ if (this._building) {
+ // Ignore changes while building path.
+ return;
+ }
+
+ // Signal start of editing when first vertex inserted, end when map clicked.
+ if (!this.editing) {
+ this._setEditing(true);
+ // The poly path and google-map-point elements lose sync once the user starts adding points,
+ // so invalidate the _points array.
+ this._points = null;
+ google.maps.event.addListenerOnce(this.map, 'click', () => {
+ this._setEditing(false);
+ this.fire('google-map-poly-path-updated', this.path);
+ });
+ }
+ },
+
+ _updatePoint(index, vertex) {
+ // Ignore changes if path is out of sync with google-map-point elements.
+ if (!this._points) {
+ return;
+ }
+
+ // Update existing point so bound properties are updated. too.
+ this._points[index].latitude = vertex.lat();
+ this._points[index].longitude = vertex.lng();
+ },
+});
diff --git a/google-map-search.html b/google-map-search.html
deleted file mode 100644
index a2f374a..0000000
--- a/google-map-search.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
-
-<link rel="import" href="../polymer/polymer.html">
-
-<!--
-`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>
- -->
-
-<script>
- (function() {
- 'use strict';
-
- 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: function() { 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: function() {
- if (this.query && this.map) {
- var 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: types,
- bounds: bounds,
- radius: radius,
- location: location
- }, this._gotResults.bind(this));
- }
- },
-
- /**
- * Fetches details for a given place.
- *
- * @param {String} placeId The place id.
- * @return {Promise} place The place information.
- */
- getDetails: function(placeId) {
- var places = new google.maps.places.PlacesService(this.map);
-
- return new Promise(function(resolve, reject) {
- places.getDetails({placeId: placeId}, function(place, status) {
- if (status === google.maps.places.PlacesServiceStatus.OK) {
- resolve(place);
- this.fire('google-map-search-place-detail', place);
- } else {
- reject(status);
- }
- }.bind(this));
- }.bind(this));
- },
-
- _gotResults: function(results, status) {
- this.results = results.map(function(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: function() {
- 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});
- }
- });
- })();
-</script>
diff --git a/google-map-search.js b/google-map-search.js
new file mode 100644
index 0000000..6aa30bf
--- /dev/null
+++ b/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 });
+ },
+});
diff --git a/google-map.html b/google-map.html
deleted file mode 100644
index 5049fb6..0000000
--- a/google-map.html
+++ /dev/null
@@ -1,863 +0,0 @@
-<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../google-apis/google-maps-api.html">
-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="../iron-selector/iron-selector.html">
-<link rel="import" href="google-map-marker.html">
-
-<!--
-The `google-map` element renders a Google Map.
-
-<b>Example</b>:
-
- <style>
- google-map {
- height: 600px;
- }
- </style>
- <google-map latitude="37.77493" longitude="-122.41942" api-key="1234"></google-map>
-
-<b>Example</b> - add markers to the map and ensure they're in view:
-
- <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
- <google-map-marker latitude="37.779" longitude="-122.3892"
- draggable="true" title="Go Giants!"></google-map-marker>
- <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
- </google-map>
-
-<b>Example</b>:
-
- <google-map disable-default-ui zoom="15"></google-map>
- <script>
- var map = document.querySelector('google-map');
- map.latitude = 37.77493;
- map.longitude = -122.41942;
- map.addEventListener('google-map-ready', function(e) {
- alert('Map loaded!');
- });
- </script>
-
-<b>Example</b> - with Google directions, using data-binding inside another Polymer element
-
- <google-map map="{{map}}"></google-map>
- <google-map-directions map="[[map]]"
- start-address="San Francisco" end-address="Mountain View">
- </google-map-directions>
-
-Disable dragging by adding `draggable="false"` on the `google-map` element.
-
-<b>Example</b> - loading the Maps API from another origin (China)
-
- <google-map maps-url="http://maps.google.cn/maps/api/js?callback=%%callback%%">
-
-### Tips
-
-If you're seeing the message "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." it probably means you're loading other maps elements on the page (`<google-maps-directions>`). Each maps element must include the same set of configuration options (`apiKey`, `clientId`, `language`, `version`, etc.) so the Maps API is loaded from the same URL.
-
-@demo demo/index.html
-@demo demo/polys.html
-@demo demo/kml.html
--->
-
-<dom-module id="google-map">
- <template>
- <style>
- :host {
- position: relative;
- display: block;
- height: 100%;
- }
-
- #map {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- </style>
-
- <google-maps-api
- id="api"
- api-key="[[apiKey]]"
- client-id="[[clientId]]"
- version="[[version]]"
- signed-in="[[signedIn]]"
- language="[[language]]"
- on-api-load="_mapApiLoaded"
- maps-url="[[mapsUrl]]">
- </google-maps-api>
-
- <div id="map"></div>
-
- <iron-selector
- id="selector"
- multi="[[!singleInfoWindow]]"
- selected-attribute="open"
- activate-event="google-map-marker-open"
- on-google-map-marker-close="_deselectMarker">
- <slot id="markers" name="markers"></slot>
- </iron-selector>
-
- <slot id="objects"></slot>
- </template>
- <script>
- (function() {
- 'use strict';
-
- Polymer({
- is: 'google-map',
-
- /**
- * Fired when the Maps API has fully loaded.
- *
- * @event google-map-ready
- */
-
- /**
- * Fired when the user clicks on the map (but not when they click on a marker, infowindow, or
- * other object). Requires the clickEvents attribute to be true.
- *
- * @event google-map-click
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the user double-clicks on the map. Note that the google-map-click event will also fire,
- * right before this one. Requires the clickEvents attribute to be true.
- *
- * @event google-map-dblclick
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired repeatedly while the user drags the map. Requires the dragEvents attribute to be true.
- *
- * @event google-map-drag
- */
-
- /**
- * Fired when the user stops dragging the map. Requires the dragEvents attribute to be true.
- *
- * @event google-map-dragend
- */
-
- /**
- * Fired when the user starts dragging the map. Requires the dragEvents attribute to be true.
- *
- * @event google-map-dragstart
- */
-
- /**
- * Fired whenever the user's mouse moves over the map container. Requires the mouseEvents attribute to
- * be true.
- *
- * @event google-map-mousemove
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the user's mouse exits the map container. Requires the mouseEvents attribute to be true.
- *
- * @event google-map-mouseout
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the user's mouse enters the map container. Requires the mouseEvents attribute to be true.
- *
- * @event google-map-mouseover
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the DOM `contextmenu` event is fired on the map container. Requires the clickEvents
- * attribute to be true.
- *
- * @event google-map-rightclick
- * @param {google.maps.MouseEvent} event The mouse event.
- */
-
- /**
- * Fired when the map becomes idle after panning or zooming.
- *
- * @event google-map-idle
- */
-
- /**
- * Polymer properties for the google-map custom element.
- */
- properties: {
- /**
- * A Maps API key. To obtain an API key, see https://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.
- },
-
- /**
- * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see https://developers.google.com/maps/documentation/business/.
- * If set, a Client ID will take precedence over an API Key.
- */
- clientId: String,
-
- /**
- * A latitude to center the map on.
- */
- latitude: {
- type: Number,
- value: 37.77493,
- notify: true,
- reflectToAttribute: true
- },
-
- /**
- * A Maps API object.
- */
- map: {
- type: Object,
- notify: true,
- value: null
- },
-
- /**
- * A longitude to center the map on.
- */
- longitude: {
- type: Number,
- value: -122.41942,
- notify: true,
- reflectToAttribute: true
- },
-
- /**
- * A kml file to load.
- */
- kml: {
- type: String,
- value: null,
- observer: '_loadKml'
- },
-
- /**
- * A zoom level to set the map to.
- */
- zoom: {
- type: Number,
- value: 10,
- observer: '_zoomChanged',
- notify: true
- },
-
- /**
- * When set, prevents the map from tilting (when the zoom level and viewport supports it).
- */
- noAutoTilt: {
- type: Boolean,
- value: false
- },
-
- /**
- * Map type to display. One of 'roadmap', 'satellite', 'hybrid', 'terrain'.
- */
- mapType: {
- type: String,
- value: 'roadmap', // roadmap, satellite, hybrid, terrain,
- observer: '_mapTypeChanged',
- notify: true
- },
-
- /**
- * Version of the Google Maps API to use.
- */
- version: {
- type: String,
- value: '3.exp'
- },
-
- /**
- * If set, removes the map's default UI controls.
- */
- disableDefaultUi: {
- type: Boolean,
- value: false,
- observer: '_disableDefaultUiChanged'
- },
-
- /**
- * If set, removes the map's 'map type' UI controls.
- */
- disableMapTypeControl: {
- type: Boolean,
- value: false,
- observer: '_disableMapTypeControlChanged'
- },
-
- /**
- * If set, removes the map's 'street view' UI controls.
- */
- disableStreetViewControl: {
- type: Boolean,
- value: false,
- observer: '_disableStreetViewControlChanged'
- },
-
- /**
- * If set, the zoom level is set such that all markers (google-map-marker children) are brought into view.
- */
- fitToMarkers: {
- type: Boolean,
- value: false,
- observer: '_fitToMarkersChanged'
- },
-
- /**
- * If true, prevent the user from zooming the map interactively.
- */
- disableZoom: {
- type: Boolean,
- value: false,
- observer: '_disableZoomChanged'
- },
-
- /**
- * If set, custom styles can be applied to the map.
- * For style documentation see https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyle
- */
- styles: {
- type: Object,
- value: function() { return {}; }
- },
-
- /**
- * A maximum zoom level which will be displayed on the map.
- */
- maxZoom: {
- type: Number,
- observer: '_maxZoomChanged'
- },
-
- /**
- * A minimum zoom level which will be displayed on the map.
- */
- minZoom: {
- type: Number,
- observer: '_minZoomChanged'
- },
-
- /**
- * If true, sign-in is enabled.
- * See https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in
- */
- signedIn: {
- type: Boolean,
- value: false
- },
-
- /**
- * 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
- },
-
- /**
- * When true, map *click events are automatically registered.
- */
- clickEvents: {
- type: Boolean,
- value: false,
- observer: '_clickEventsChanged'
- },
-
- /**
- * When true, map drag* events are automatically registered.
- */
- dragEvents: {
- type: Boolean,
- value: false,
- observer: '_dragEventsChanged'
- },
-
- /**
- * When true, map mouse* events are automatically registered.
- */
- mouseEvents: {
- type: Boolean,
- value: false,
- observer: '_mouseEventsChanged'
- },
-
- /**
- * Additional map options for google.maps.Map constructor.
- * Use to specify additional options we do not expose as
- * properties.
- * Ex: `<google-map additional-map-options='{"mapTypeId":"satellite"}'>`
- *
- * Note, you can't use API enums like `google.maps.ControlPosition.TOP_RIGHT`
- * when using this property as an HTML attribute. Instead, use the actual
- * value (e.g. `3`) or set `.additionalMapOptions` in JS rather than using
- * the attribute.
- */
- additionalMapOptions: {
- type: Object,
- value: function() { return {}; }
- },
-
- /**
- * The markers on the map.
- */
- markers: {
- type: Array,
- value: function() { return []; },
- readOnly: true
- },
-
- /**
- * The non-marker objects on the map.
- */
- objects: {
- type: Array,
- value: function() { return []; },
- readOnly: true
- },
-
- /**
- * If set, all other info windows on markers are closed when opening a new one.
- */
- singleInfoWindow: {
- type: Boolean,
- value: false
- }
- },
-
- behaviors: [
- Polymer.IronResizableBehavior
- ],
-
- listeners: {
- 'iron-resize': 'resize'
- },
-
- observers: [
- '_debounceUpdateCenter(latitude, longitude)'
- ],
-
- attached: function() {
- this._initGMap();
- },
-
- detached: function() {
- if (this._markersChildrenListener) {
- this.unlisten(this.$.selector, 'items-changed', '_updateMarkers');
- this._markersChildrenListener = null;
- }
- if (this._objectsMutationObserver) {
- this._objectsMutationObserver.disconnect();
- this._objectsMutationObserver = null;
- }
- },
-
- _initGMap: function() {
- if (this.map) {
- return; // already initialized
- }
- if (this.$.api.libraryLoaded !== true) {
- return; // api not loaded
- }
- if (!this.isAttached) {
- return; // not attached
- }
-
- this.map = new google.maps.Map(this.$.map, this._getMapOptions());
- this._listeners = {};
- this._updateCenter();
- this._loadKml();
- this._updateMarkers();
- this._updateObjects();
- this._addMapListeners();
- this.fire('google-map-ready');
- },
-
- _mapApiLoaded: function() {
- this._initGMap();
- },
-
- _getMapOptions: function() {
- var mapOptions = {
- zoom: this.zoom,
- tilt: this.noAutoTilt ? 0 : 45,
- mapTypeId: this.mapType,
- disableDefaultUI: this.disableDefaultUi,
- mapTypeControl: !this.disableDefaultUi && !this.disableMapTypeControl,
- streetViewControl: !this.disableDefaultUi && !this.disableStreetViewControl,
- disableDoubleClickZoom: this.disableZoom,
- scrollwheel: !this.disableZoom,
- styles: this.styles,
- maxZoom: Number(this.maxZoom),
- minZoom: Number(this.minZoom)
- };
-
- // Only override the default if set.
- // We use getAttribute here because the default value of this.draggable = false even when not set.
- if (this.getAttribute('draggable') != null) {
- mapOptions.draggable = this.draggable
- }
- for (var p in this.additionalMapOptions)
- mapOptions[p] = this.additionalMapOptions[p];
-
- return mapOptions;
- },
-
- _attachChildrenToMap: function(children) {
- if (this.map) {
- for (var i = 0, child; child = children[i]; ++i) {
- child.map = this.map;
- }
- }
- },
-
- // watch for future updates to marker objects
- _observeMarkers: function() {
- // Watch for future updates.
- if (this._markersChildrenListener) {
- return;
- }
- this._markersChildrenListener = this.listen(this.$.selector, 'items-changed', '_updateMarkers');
- },
-
- _updateMarkers: function() {
- var newMarkers = Array.prototype.slice.call(
- Polymer.dom(this.$.markers).getDistributedNodes());
-
- // do not recompute if markers have not been added or removed
- if (newMarkers.length === this.markers.length) {
- var added = newMarkers.filter(function(m) {
- return this.markers && this.markers.indexOf(m) === -1;
- }.bind(this));
- if (added.length === 0) {
- // set up observer first time around
- if (!this._markersChildrenListener) {
- this._observeMarkers();
- }
- return;
- }
- }
-
- this._observeMarkers();
-
- this._setMarkers(newMarkers);
-
- // Set the map on each marker and zoom viewport to ensure they're in view.
- this._attachChildrenToMap(this.markers);
- if (this.fitToMarkers) {
- this._fitToMarkersChanged();
- }
- },
-
- // watch for future updates to non-marker objects
- _observeObjects: function() {
- if (this._objectsMutationObserver) {
- return;
- }
- this._objectsMutationObserver = new MutationObserver(this._updateObjects.bind(this));
- this._objectsMutationObserver.observe(this, {
- childList: true
- });
- },
-
- _updateObjects: function() {
- var newObjects = Array.prototype.slice.call(
- Polymer.dom(this.$.objects).getDistributedNodes());
-
- // Do not recompute if objects have not been added or removed.
- if (newObjects.length === this.objects.length) {
- var added = newObjects.filter(function(o) {
- return this.objects.indexOf(o) === -1;
- }.bind(this));
- if (added.length === 0) {
- // Set up observer first time around.
- this._observeObjects();
- return;
- }
- }
-
- this._observeObjects();
- this._setObjects(newObjects);
- this._attachChildrenToMap(this.objects);
- },
-
- /**
- * Clears all markers from the map.
- *
- * @method clear
- */
- clear: function() {
- for (var i = 0, m; m = this.markers[i]; ++i) {
- m.marker.setMap(null);
- }
- },
-
- /**
- * Explicitly resizes the map, updating its center. This is useful if the
- * map does not show after you have unhidden it.
- *
- * @method resize
- */
- resize: function() {
- if (this.map) {
-
- // saves and restores latitude/longitude because resize can move the center
- var oldLatitude = this.latitude;
- var oldLongitude = this.longitude;
- google.maps.event.trigger(this.map, 'resize');
- this.latitude = oldLatitude; // restore because resize can move our center
- this.longitude = oldLongitude;
-
- if (this.fitToMarkers) { // we might not have a center if we are doing fit-to-markers
- this._fitToMarkersChanged();
- }
- }
- },
-
- _loadKml: function() {
- if (this.map && this.kml) {
- var kmlfile = new google.maps.KmlLayer({
- url: this.kml,
- map: this.map
- });
- }
- },
-
- _debounceUpdateCenter: function() {
- this.debounce('updateCenter', this._updateCenter);
- },
-
- _updateCenter: function() {
- this.cancelDebouncer('updateCenter');
-
- if (this.map && this.latitude !== undefined && this.longitude !== undefined) {
- // allow for latitude and longitude to be String-typed, but still Number valued
- var lati = Number(this.latitude);
- if (isNaN(lati)) {
- throw new TypeError('latitude must be a number');
- }
- var longi = Number(this.longitude);
- if (isNaN(longi)) {
- throw new TypeError('longitude must be a number');
- }
-
- var newCenter = new google.maps.LatLng(lati, longi);
- var oldCenter = this.map.getCenter();
-
- if (!oldCenter) {
- // If the map does not have a center, set it right away.
- this.map.setCenter(newCenter);
- } else {
- // Using google.maps.LatLng returns corrected lat/lngs.
- oldCenter = new google.maps.LatLng(oldCenter.lat(), oldCenter.lng());
-
- // If the map currently has a center, slowly pan to the new one.
- if (!oldCenter.equals(newCenter)) {
- this.map.panTo(newCenter);
- }
- }
- }
- },
-
- _zoomChanged: function() {
- if (this.map) {
- this.map.setZoom(Number(this.zoom));
- }
- },
-
- _idleEvent: function() {
- if (this.map) {
- this._forwardEvent('idle');
- } else {
- this._clearListener('idle');
- }
- },
-
- _clickEventsChanged: function() {
- if (this.map) {
- if (this.clickEvents) {
- this._forwardEvent('click');
- this._forwardEvent('dblclick');
- this._forwardEvent('rightclick');
- } else {
- this._clearListener('click');
- this._clearListener('dblclick');
- this._clearListener('rightclick');
- }
- }
- },
-
- _dragEventsChanged: function() {
- if (this.map) {
- if (this.dragEvents) {
- this._forwardEvent('drag');
- this._forwardEvent('dragend');
- this._forwardEvent('dragstart');
- } else {
- this._clearListener('drag');
- this._clearListener('dragend');
- this._clearListener('dragstart');
- }
- }
- },
-
- _mouseEventsChanged: function() {
- if (this.map) {
- if (this.mouseEvents) {
- this._forwardEvent('mousemove');
- this._forwardEvent('mouseout');
- this._forwardEvent('mouseover');
- } else {
- this._clearListener('mousemove');
- this._clearListener('mouseout');
- this._clearListener('mouseover');
- }
- }
- },
-
- _maxZoomChanged: function() {
- if (this.map) {
- this.map.setOptions({maxZoom: Number(this.maxZoom)});
- }
- },
-
- _minZoomChanged: function() {
- if (this.map) {
- this.map.setOptions({minZoom: Number(this.minZoom)});
- }
- },
-
- _mapTypeChanged: function() {
- if (this.map) {
- this.map.setMapTypeId(this.mapType);
- }
- },
-
- _disableDefaultUiChanged: function() {
- if (!this.map) {
- return;
- }
- this.map.setOptions({disableDefaultUI: this.disableDefaultUi});
- },
-
- _disableMapTypeControlChanged: function() {
- if (!this.map) {
- return;
- }
- this.map.setOptions({mapTypeControl: !this.disableMapTypeControl});
- },
-
- _disableStreetViewControlChanged: function() {
- if (!this.map) {
- return;
- }
- this.map.setOptions({streetViewControl: !this.disableStreetViewControl});
- },
-
- _disableZoomChanged: function() {
- if (!this.map) {
- return;
- }
- this.map.setOptions({
- disableDoubleClickZoom: this.disableZoom,
- scrollwheel: !this.disableZoom
- });
- },
-
- attributeChanged: function(attrName) {
- if (!this.map) {
- return;
- }
- // Cannot use *Changed watchers for native properties.
- switch (attrName) {
- case 'draggable':
- this.map.setOptions({draggable: this.draggable});
- break;
- }
- },
-
- _fitToMarkersChanged: function() {
- // TODO(ericbidelman): respect user's zoom level.
-
- if (this.map && this.fitToMarkers && this.markers.length > 0) {
- var latLngBounds = new google.maps.LatLngBounds();
- for (var i = 0, m; m = this.markers[i]; ++i) {
- latLngBounds.extend(
- new google.maps.LatLng(m.latitude, m.longitude));
- }
-
- // For one marker, don't alter zoom, just center it.
- if (this.markers.length > 1) {
- this.map.fitBounds(latLngBounds);
- }
-
- this.map.setCenter(latLngBounds.getCenter());
- }
- },
-
- _addMapListeners: function() {
- google.maps.event.addListener(this.map, 'center_changed', function() {
- var center = this.map.getCenter();
- this.latitude = center.lat();
- this.longitude = center.lng();
- }.bind(this));
-
- google.maps.event.addListener(this.map, 'zoom_changed', function() {
- this.zoom = this.map.getZoom();
- }.bind(this));
-
- google.maps.event.addListener(this.map, 'maptypeid_changed', function() {
- this.mapType = this.map.getMapTypeId();
- }.bind(this));
-
- this._clickEventsChanged();
- this._dragEventsChanged();
- this._mouseEventsChanged();
- this._idleEvent();
- },
-
- _clearListener: function(name) {
- if (this._listeners[name]) {
- google.maps.event.removeListener(this._listeners[name]);
- this._listeners[name] = null;
- }
- },
-
- _forwardEvent: function(name) {
- this._listeners[name] = google.maps.event.addListener(this.map, name, function(event) {
- this.fire('google-map-' + name, event);
- }.bind(this));
- },
-
- _deselectMarker: function(e, detail) {
- // If singleInfoWindow is set, update iron-selector's selected attribute to be null.
- // Else remove the marker from iron-selector's selected array.
- var markerIndex = this.$.selector.indexOf(e.target);
-
- if (this.singleInfoWindow) {
- this.$.selector.selected = null;
- } else if (this.$.selector.selectedValues) {
- this.$.selector.selectedValues = this.$.selector.selectedValues.filter(function(i) {return i !== markerIndex});
- }
- }
- });
- })();
- </script>
-</dom-module>
diff --git a/google-map.js b/google-map.js
new file mode 100644
index 0000000..406e970
--- /dev/null
+++ b/google-map.js
@@ -0,0 +1,855 @@
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import '../polymer-google-apis/google-maps-api.js';
+import './google-map-marker.js';
+
+/* Copyright (c) 2015 Google Inc. All rights reserved. */
+/**
+The `google-map` element renders a Google Map.
+
+<b>Example</b>:
+
+ <style>
+ google-map {
+ height: 600px;
+ }
+ </style>
+ <google-map latitude="37.77493" longitude="-122.41942" api-key="1234"></google-map>
+
+<b>Example</b> - add markers to the map and ensure they're in view:
+
+ <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
+ <google-map-marker latitude="37.779" longitude="-122.3892"
+ draggable="true" title="Go Giants!"></google-map-marker>
+ <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
+ </google-map>
+
+<b>Example</b>:
+
+ <google-map disable-default-ui zoom="15"></google-map>
+ <script>
+ var map = document.querySelector('google-map');
+ map.latitude = 37.77493;
+ map.longitude = -122.41942;
+ map.addEventListener('google-map-ready', function(e) {
+ alert('Map loaded!');
+ });
+ </script>
+
+<b>Example</b> - with Google directions, using data-binding inside another Polymer element
+
+ <google-map map="{{map}}"></google-map>
+ <google-map-directions map="[[map]]"
+ start-address="San Francisco" end-address="Mountain View">
+ </google-map-directions>
+
+Disable dragging by adding `draggable="false"` on the `google-map` element.
+
+<b>Example</b> - loading the Maps API from another origin (China)
+
+ <google-map maps-url="http://maps.google.cn/maps/api/js?callback=%%callback%%">
+
+### Tips
+
+If you're seeing the message "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." it probably means you're loading other maps elements on the page (`<google-maps-directions>`). Each maps element must include the same set of configuration options (`apiKey`, `clientId`, `language`, `version`, etc.) so the Maps API is loaded from the same URL.
+
+@demo demo/index.html
+@demo demo/polys.html
+@demo demo/kml.html
+*/
+Polymer({
+ _template: html`
+ <style>
+ :host {
+ position: relative;
+ display: block;
+ height: 100%;
+ }
+
+ #map {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+ </style>
+
+ <google-maps-api id="api" api-key="[[apiKey]]" client-id="[[clientId]]" version="[[version]]" signed-in="[[signedIn]]" language="[[language]]" on-api-load="_mapApiLoaded" maps-url="[[mapsUrl]]">
+ </google-maps-api>
+
+ <div id="map"></div>
+
+ <iron-selector id="selector" multi="[[!singleInfoWindow]]" selected-attribute="open" activate-event="google-map-marker-open" on-google-map-marker-close="_deselectMarker">
+ <slot id="markers" name="markers"></slot>
+ </iron-selector>
+
+ <slot id="objects"></slot>
+`,
+
+ is: 'google-map',
+
+ /**
+ * Fired when the Maps API has fully loaded.
+ *
+ * @event google-map-ready
+ */
+
+ /**
+ * Fired when the user clicks on the map (but not when they click on a marker, infowindow, or
+ * other object). Requires the clickEvents attribute to be true.
+ *
+ * @event google-map-click
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the user double-clicks on the map. Note that the google-map-click event will also fire,
+ * right before this one. Requires the clickEvents attribute to be true.
+ *
+ * @event google-map-dblclick
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired repeatedly while the user drags the map. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-drag
+ */
+
+ /**
+ * Fired when the user stops dragging the map. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-dragend
+ */
+
+ /**
+ * Fired when the user starts dragging the map. Requires the dragEvents attribute to be true.
+ *
+ * @event google-map-dragstart
+ */
+
+ /**
+ * Fired whenever the user's mouse moves over the map container. Requires the mouseEvents attribute to
+ * be true.
+ *
+ * @event google-map-mousemove
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the user's mouse exits the map container. Requires the mouseEvents attribute to be true.
+ *
+ * @event google-map-mouseout
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the user's mouse enters the map container. Requires the mouseEvents attribute to be true.
+ *
+ * @event google-map-mouseover
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the DOM `contextmenu` event is fired on the map container. Requires the clickEvents
+ * attribute to be true.
+ *
+ * @event google-map-rightclick
+ * @param {google.maps.MouseEvent} event The mouse event.
+ */
+
+ /**
+ * Fired when the map becomes idle after panning or zooming.
+ *
+ * @event google-map-idle
+ */
+
+ /**
+ * Polymer properties for the google-map custom element.
+ */
+ properties: {
+ /**
+ * A Maps API key. To obtain an API key, see https://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.
+ },
+
+ /**
+ * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see https://developers.google.com/maps/documentation/business/.
+ * If set, a Client ID will take precedence over an API Key.
+ */
+ clientId: String,
+
+ /**
+ * A latitude to center the map on.
+ */
+ latitude: {
+ type: Number,
+ value: 37.77493,
+ notify: true,
+ reflectToAttribute: true,
+ },
+
+ /**
+ * A Maps API object.
+ */
+ map: {
+ type: Object,
+ notify: true,
+ value: null,
+ },
+
+ /**
+ * A longitude to center the map on.
+ */
+ longitude: {
+ type: Number,
+ value: -122.41942,
+ notify: true,
+ reflectToAttribute: true,
+ },
+
+ /**
+ * A kml file to load.
+ */
+ kml: {
+ type: String,
+ value: null,
+ observer: '_loadKml',
+ },
+
+ /**
+ * A zoom level to set the map to.
+ */
+ zoom: {
+ type: Number,
+ value: 10,
+ observer: '_zoomChanged',
+ notify: true,
+ },
+
+ /**
+ * When set, prevents the map from tilting (when the zoom level and viewport supports it).
+ */
+ noAutoTilt: {
+ type: Boolean,
+ value: false,
+ },
+
+ /**
+ * Map type to display. One of 'roadmap', 'satellite', 'hybrid', 'terrain'.
+ */
+ mapType: {
+ type: String,
+ value: 'roadmap', // roadmap, satellite, hybrid, terrain,
+ observer: '_mapTypeChanged',
+ notify: true,
+ },
+
+ /**
+ * Version of the Google Maps API to use.
+ */
+ version: {
+ type: String,
+ value: '3.exp',
+ },
+
+ /**
+ * If set, removes the map's default UI controls.
+ */
+ disableDefaultUi: {
+ type: Boolean,
+ value: false,
+ observer: '_disableDefaultUiChanged',
+ },
+
+ /**
+ * If set, removes the map's 'map type' UI controls.
+ */
+ disableMapTypeControl: {
+ type: Boolean,
+ value: false,
+ observer: '_disableMapTypeControlChanged',
+ },
+
+ /**
+ * If set, removes the map's 'street view' UI controls.
+ */
+ disableStreetViewControl: {
+ type: Boolean,
+ value: false,
+ observer: '_disableStreetViewControlChanged',
+ },
+
+ /**
+ * If set, the zoom level is set such that all markers (google-map-marker children) are brought into view.
+ */
+ fitToMarkers: {
+ type: Boolean,
+ value: false,
+ observer: '_fitToMarkersChanged',
+ },
+
+ /**
+ * If true, prevent the user from zooming the map interactively.
+ */
+ disableZoom: {
+ type: Boolean,
+ value: false,
+ observer: '_disableZoomChanged',
+ },
+
+ /**
+ * If set, custom styles can be applied to the map.
+ * For style documentation see https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyle
+ */
+ styles: {
+ type: Object,
+ value() { return {}; },
+ },
+
+ /**
+ * A maximum zoom level which will be displayed on the map.
+ */
+ maxZoom: {
+ type: Number,
+ observer: '_maxZoomChanged',
+ },
+
+ /**
+ * A minimum zoom level which will be displayed on the map.
+ */
+ minZoom: {
+ type: Number,
+ observer: '_minZoomChanged',
+ },
+
+ /**
+ * If true, sign-in is enabled.
+ * See https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in
+ */
+ signedIn: {
+ type: Boolean,
+ value: false,
+ },
+
+ /**
+ * 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,
+ },
+
+ /**
+ * When true, map *click events are automatically registered.
+ */
+ clickEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_clickEventsChanged',
+ },
+
+ /**
+ * When true, map bounds and center change events are automatically
+ * registered.
+ */
+ boundEvents: {
+ type: Boolean,
+ value: true,
+ observer: '_boundEventsChanged',
+ },
+
+ /**
+ * When true, map drag* events are automatically registered.
+ */
+ dragEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_dragEventsChanged',
+ },
+
+ /**
+ * When true, map mouse* events are automatically registered.
+ */
+ mouseEvents: {
+ type: Boolean,
+ value: false,
+ observer: '_mouseEventsChanged',
+ },
+
+ /**
+ * Additional map options for google.maps.Map constructor.
+ * Use to specify additional options we do not expose as
+ * properties.
+ * Ex: `<google-map additional-map-options='{"mapTypeId":"satellite"}'>`
+ *
+ * Note, you can't use API enums like `google.maps.ControlPosition.TOP_RIGHT`
+ * when using this property as an HTML attribute. Instead, use the actual
+ * value (e.g. `3`) or set `.additionalMapOptions` in JS rather than using
+ * the attribute.
+ */
+ additionalMapOptions: {
+ type: Object,
+ value() { return {}; },
+ },
+
+ /**
+ * The markers on the map.
+ */
+ markers: {
+ type: Array,
+ value() { return []; },
+ readOnly: true,
+ },
+
+ /**
+ * The non-marker objects on the map.
+ */
+ objects: {
+ type: Array,
+ value() { return []; },
+ readOnly: true,
+ },
+
+ /**
+ * If set, all other info windows on markers are closed when opening a new one.
+ */
+ singleInfoWindow: {
+ type: Boolean,
+ value: false,
+ },
+ },
+
+ listeners: {
+ 'iron-resize': 'resize',
+ },
+
+ observers: [
+ '_debounceUpdateCenter(latitude, longitude)',
+ ],
+
+ attached() {
+ this._initGMap();
+ },
+
+ detached() {
+ if (this._markersChildrenListener) {
+ this.unlisten(this.$.selector, 'items-changed', '_updateMarkers');
+ this._markersChildrenListener = null;
+ }
+ if (this._objectsMutationObserver) {
+ this._objectsMutationObserver.disconnect();
+ this._objectsMutationObserver = null;
+ }
+ },
+
+ behaviors: [
+ IronResizableBehavior,
+ ],
+
+ _initGMap() {
+ if (this.map) {
+ return; // already initialized
+ }
+ if (this.$.api.libraryLoaded !== true) {
+ return; // api not loaded
+ }
+ if (!this.isAttached) {
+ return; // not attached
+ }
+
+ this.map = new google.maps.Map(this.$.map, this._getMapOptions());
+ this._listeners = {};
+ this._updateCenter();
+ this._loadKml();
+ this._updateMarkers();
+ this._updateObjects();
+ this._addMapListeners();
+ this.fire('google-map-ready');
+ },
+
+ _mapApiLoaded() {
+ this._initGMap();
+ },
+
+ _getMapOptions() {
+ const mapOptions = {
+ zoom: this.zoom,
+ tilt: this.noAutoTilt ? 0 : 45,
+ mapTypeId: this.mapType,
+ disableDefaultUI: this.disableDefaultUi,
+ mapTypeControl: !this.disableDefaultUi && !this.disableMapTypeControl,
+ streetViewControl: !this.disableDefaultUi && !this.disableStreetViewControl,
+ disableDoubleClickZoom: this.disableZoom,
+ scrollwheel: !this.disableZoom,
+ styles: this.styles,
+ maxZoom: Number(this.maxZoom),
+ minZoom: Number(this.minZoom),
+ };
+
+ // Only override the default if set.
+ // We use getAttribute here because the default value of this.draggable = false even when not set.
+ if (this.getAttribute('draggable') != null) {
+ mapOptions.draggable = this.draggable;
+ }
+ for (const p in this.additionalMapOptions) { mapOptions[p] = this.additionalMapOptions[p]; }
+
+ return mapOptions;
+ },
+
+ _attachChildrenToMap(children) {
+ if (this.map) {
+ for (var i = 0, child; child = children[i]; ++i) {
+ child.map = this.map;
+ }
+ }
+ },
+
+ // watch for future updates to marker objects
+ _observeMarkers() {
+ // Watch for future updates.
+ if (this._markersChildrenListener) {
+ return;
+ }
+ this._markersChildrenListener = this.listen(this.$.selector, 'items-changed', '_updateMarkers');
+ },
+
+ _updateMarkers() {
+ const newMarkers = Array.prototype.slice.call(this.$.markers.assignedNodes({ flatten: true }));
+
+ // do not recompute if markers have not been added or removed
+ if (newMarkers.length === this.markers.length) {
+ const added = newMarkers.filter(m => this.markers && this.markers.indexOf(m) === -1);
+ if (added.length === 0) {
+ // set up observer first time around
+ if (!this._markersChildrenListener) {
+ this._observeMarkers();
+ }
+ return;
+ }
+ }
+
+ this._observeMarkers();
+
+ this.markers = this._setMarkers(newMarkers);
+
+ // Set the map on each marker and zoom viewport to ensure they're in view.
+ this._attachChildrenToMap(this.markers);
+ if (this.fitToMarkers) {
+ this._fitToMarkersChanged();
+ }
+ },
+
+ // watch for future updates to non-marker objects
+ _observeObjects() {
+ if (this._objectsMutationObserver) {
+ return;
+ }
+ this._objectsMutationObserver = new MutationObserver(this._updateObjects.bind(this));
+ this._objectsMutationObserver.observe(this, {
+ childList: true,
+ });
+ },
+
+ _updateObjects() {
+ const newObjects = Array.prototype.slice.call(this.$.objects.assignedNodes({ flatten: true }));
+
+ // Do not recompute if objects have not been added or removed.
+ if (newObjects.length === this.objects.length) {
+ const added = newObjects.filter(o => this.objects.indexOf(o) === -1);
+ if (added.length === 0) {
+ // Set up observer first time around.
+ this._observeObjects();
+ return;
+ }
+ }
+
+ this._observeObjects();
+ this._setObjects(newObjects);
+ this._attachChildrenToMap(this.objects);
+ },
+
+ /**
+ * Clears all markers from the map.
+ *
+ * @method clear
+ */
+ clear() {
+ for (var i = 0, m; m = this.markers[i]; ++i) {
+ m.marker.setMap(null);
+ }
+ },
+
+ /**
+ * Explicitly resizes the map, updating its center. This is useful if the
+ * map does not show after you have unhidden it.
+ *
+ * @method resize
+ */
+ resize() {
+ if (this.map) {
+ // saves and restores latitude/longitude because resize can move the center
+ const oldLatitude = this.latitude;
+ const oldLongitude = this.longitude;
+ google.maps.event.trigger(this.map, 'resize');
+ this.latitude = oldLatitude; // restore because resize can move our center
+ this.longitude = oldLongitude;
+
+ if (this.fitToMarkers) { // we might not have a center if we are doing fit-to-markers
+ this._fitToMarkersChanged();
+ }
+ }
+ },
+
+ _loadKml() {
+ if (this.map && this.kml) {
+ const kmlfile = new google.maps.KmlLayer({
+ url: this.kml,
+ map: this.map,
+ });
+ }
+ },
+
+ _debounceUpdateCenter() {
+ this.debounce('updateCenter', this._updateCenter);
+ },
+
+ _updateCenter() {
+ this.cancelDebouncer('updateCenter');
+
+ if (this.map && this.latitude !== undefined && this.longitude !== undefined) {
+ // allow for latitude and longitude to be String-typed, but still Number valued
+ const lati = Number(this.latitude);
+ if (isNaN(lati)) {
+ throw new TypeError('latitude must be a number');
+ }
+ const longi = Number(this.longitude);
+ if (isNaN(longi)) {
+ throw new TypeError('longitude must be a number');
+ }
+
+ const newCenter = new google.maps.LatLng(lati, longi);
+ let oldCenter = this.map.getCenter();
+
+ if (!oldCenter) {
+ // If the map does not have a center, set it right away.
+ this.map.setCenter(newCenter);
+ } else {
+ // Using google.maps.LatLng returns corrected lat/lngs.
+ oldCenter = new google.maps.LatLng(oldCenter.lat(), oldCenter.lng());
+
+ // If the map currently has a center, slowly pan to the new one.
+ if (!oldCenter.equals(newCenter)) {
+ this.map.panTo(newCenter);
+ }
+ }
+ }
+ },
+
+ _zoomChanged() {
+ if (this.map) {
+ this.map.setZoom(Number(this.zoom));
+ }
+ },
+
+ _idleEvent() {
+ if (this.map) {
+ this._forwardEvent('idle');
+ } else {
+ this._clearListener('idle');
+ }
+ },
+
+ _boundEventsChanged() {
+ if (this.map) {
+ if (this.boundEvents) {
+ this._forwardEvent('center_changed');
+ this._forwardEvent('bounds_changed');
+ } else {
+ this._clearListener('center_changed');
+ this._clearListener('bounds_changed');
+ }
+ }
+ },
+
+ _clickEventsChanged() {
+ if (this.map) {
+ if (this.clickEvents) {
+ this._forwardEvent('click');
+ this._forwardEvent('dblclick');
+ this._forwardEvent('rightclick');
+ } else {
+ this._clearListener('click');
+ this._clearListener('dblclick');
+ this._clearListener('rightclick');
+ }
+ }
+ },
+
+ _dragEventsChanged() {
+ if (this.map) {
+ if (this.dragEvents) {
+ this._forwardEvent('drag');
+ this._forwardEvent('dragend');
+ this._forwardEvent('dragstart');
+ } else {
+ this._clearListener('drag');
+ this._clearListener('dragend');
+ this._clearListener('dragstart');
+ }
+ }
+ },
+
+ _mouseEventsChanged() {
+ if (this.map) {
+ if (this.mouseEvents) {
+ this._forwardEvent('mousemove');
+ this._forwardEvent('mouseout');
+ this._forwardEvent('mouseover');
+ } else {
+ this._clearListener('mousemove');
+ this._clearListener('mouseout');
+ this._clearListener('mouseover');
+ }
+ }
+ },
+
+ _maxZoomChanged() {
+ if (this.map) {
+ this.map.setOptions({ maxZoom: Number(this.maxZoom) });
+ }
+ },
+
+ _minZoomChanged() {
+ if (this.map) {
+ this.map.setOptions({ minZoom: Number(this.minZoom) });
+ }
+ },
+
+ _mapTypeChanged() {
+ if (this.map) {
+ this.map.setMapTypeId(this.mapType);
+ }
+ },
+
+ _disableDefaultUiChanged() {
+ if (!this.map) {
+ return;
+ }
+ this.map.setOptions({ disableDefaultUI: this.disableDefaultUi });
+ },
+
+ _disableMapTypeControlChanged() {
+ if (!this.map) {
+ return;
+ }
+ this.map.setOptions({ mapTypeControl: !this.disableMapTypeControl });
+ },
+
+ _disableStreetViewControlChanged() {
+ if (!this.map) {
+ return;
+ }
+ this.map.setOptions({ streetViewControl: !this.disableStreetViewControl });
+ },
+
+ _disableZoomChanged() {
+ if (!this.map) {
+ return;
+ }
+ this.map.setOptions({
+ disableDoubleClickZoom: this.disableZoom,
+ scrollwheel: !this.disableZoom,
+ });
+ },
+
+ attributeChanged(attrName) {
+ if (!this.map) {
+ return;
+ }
+ // Cannot use *Changed watchers for native properties.
+ switch (attrName) {
+ case 'draggable':
+ this.map.setOptions({ draggable: this.draggable });
+ break;
+ }
+ },
+
+ _fitToMarkersChanged() {
+ // TODO(ericbidelman): respect user's zoom level.
+
+ if (this.map && this.fitToMarkers && this.markers.length > 0) {
+ const latLngBounds = new google.maps.LatLngBounds();
+ for (var i = 0, m; m = this.markers[i]; ++i) {
+ latLngBounds.extend(new google.maps.LatLng(m.latitude, m.longitude));
+ }
+
+ // For one marker, don't alter zoom, just center it.
+ if (this.markers.length > 1) {
+ this.map.fitBounds(latLngBounds);
+ }
+
+ this.map.setCenter(latLngBounds.getCenter());
+ }
+ },
+
+ _addMapListeners() {
+ google.maps.event.addListener(this.map, 'center_changed', () => {
+ const center = this.map.getCenter();
+ this.latitude = center.lat();
+ this.longitude = center.lng();
+ });
+
+ google.maps.event.addListener(this.map, 'zoom_changed', () => {
+ this.zoom = this.map.getZoom();
+ });
+
+ google.maps.event.addListener(this.map, 'maptypeid_changed', () => {
+ this.mapType = this.map.getMapTypeId();
+ });
+
+ this._clickEventsChanged();
+ this._boundEventsChanged();
+ this._dragEventsChanged();
+ this._mouseEventsChanged();
+ this._idleEvent();
+ },
+
+ _clearListener(name) {
+ if (this._listeners[name]) {
+ google.maps.event.removeListener(this._listeners[name]);
+ this._listeners[name] = null;
+ }
+ },
+
+ _forwardEvent(name) {
+ this._listeners[name] = google.maps.event.addListener(this.map, name, (event) => {
+ this.fire(`google-map-${name}`, event);
+ });
+ },
+
+ _deselectMarker(e, detail) {
+ // If singleInfoWindow is set, update iron-selector's selected attribute to be null.
+ // Else remove the marker from iron-selector's selected array.
+ const markerIndex = this.$.selector.indexOf(e.target);
+
+ if (this.singleInfoWindow) {
+ this.$.selector.selected = null;
+ } else if (this.$.selector.selectedValues) {
+ this.$.selector.selectedValues = this.$.selector.selectedValues.filter(i => i !== markerIndex);
+ }
+ },
+});
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ea183e8
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/test/google-map-basic.html b/test/google-map-basic.html
index a359592..85dd9da 100644
--- a/test/google-map-basic.html
+++ b/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>
diff --git a/test/google-map-update-pos.html b/test/google-map-update-pos.html
index e411ad5..9ba3bd6 100644
--- a/test/google-map-update-pos.html
+++ b/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>
diff --git a/test/marker-basic.html b/test/marker-basic.html
index 9d4a355..8e2ed65 100644
--- a/test/marker-basic.html
+++ b/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>
diff --git a/test/markers-add-remove.html b/test/markers-add-remove.html
index a2230a3..2b24fce 100644
--- a/test/markers-add-remove.html
+++ b/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>
diff --git a/test/origin-tests.html b/test/origin-tests.html
index 69a8da9..1a378d9 100644
--- a/test/origin-tests.html
+++ b/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>
diff --git a/test/poly-basic.html b/test/poly-basic.html
index 3c8b064..3aa22b4 100644
--- a/test/poly-basic.html
+++ b/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>
diff --git a/test/poly-custom-properties.html b/test/poly-custom-properties.html
index c5133cc..3e5a78c 100644
--- a/test/poly-custom-properties.html
+++ b/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>