From f40dc3f7924fb89e63fb3a090d70e4a1868dc89e Mon Sep 17 00:00:00 2001 From: Alejandro Torrado 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 ", - "Scott Miles ", - "Eric Bidelman " - ], - "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 @@ Google Map demo - - - - + + + + - - - - - - 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: + + + +*/ +Polymer({ + _template: html` + + + + +`, + + 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 + */ + 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 @@ - - - - - - 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 @@ - - - - - - - - - - - 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` + + + +`, + + 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 @@ - - - - - - - - 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. + +Example—points defining a semi-translucent blue triangle: + + + + + + + + +*/ +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 @@ - - - - - - - - - - - - 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` + + + +`, + + 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.} 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.} 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. + */ + 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 @@ - - - - - - - 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: + + + */ +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 @@ - - - - - - - - - - - - - - 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. + +Example: + + + + +Example - add markers to the map and ensure they're in view: + + + + + + +Example: + + + + +Example - with Google directions, using data-binding inside another Polymer element + + + + + +Disable dragging by adding `draggable="false"` on the `google-map` element. + +Example - loading the Maps API from another origin (China) + + + +### 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 (``). 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` + + + + + +
+ + + + + + +`, + + 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: `` + * + * 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 ", + "Scott Miles ", + "Eric Bidelman ", + "Ed Medvedev ", + "Alejandro Torrado " + ], + "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 @@ - + @@ -16,7 +16,8 @@ no-auto-tilt fit-to-markers single-info-window>
- 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 @@ - + - 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 @@ - + @@ -16,7 +16,8 @@ - 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 @@ - + @@ -15,10 +15,11 @@ - 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 @@ - + - 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 @@ - - + + @@ -20,7 +20,9 @@ - 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 @@ - - + + @@ -20,7 +20,9 @@ -