Index: lib/src/google-map/google-map.html |
diff --git a/lib/src/google-map/google-map.html b/lib/src/google-map/google-map.html |
index 3be9cbbd93f457b276448e9129f1f794b1feb1af..03a2ee261645e5e95a99e985d5e481ed4b726859 100644 |
--- a/lib/src/google-map/google-map.html |
+++ b/lib/src/google-map/google-map.html |
@@ -3,6 +3,7 @@ |
<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. |
@@ -38,7 +39,7 @@ The `google-map` element renders a Google Map. |
<b>Example</b> - with Google directions, using data-binding inside another Polymer element |
- <google-map map="{{map}}" libraries="places"></google-map> |
+ <google-map map="{{map}}"></google-map> |
<google-map-directions map="{{map}}" |
start-address="San Francisco" end-address="Mountain View"> |
</google-map-directions> |
@@ -69,15 +70,16 @@ The `google-map` element renders a Google Map. |
api-key="[[apiKey]]" |
client-id="[[clientId]]" |
version="[[version]]" |
- libraries="[[libraries]]" |
signed-in="[[signedIn]]" |
language="[[language]]" |
on-api-load="_mapApiLoaded"></google-maps-api> |
<div id="map"></div> |
- <content id="markers" select="google-map-marker"></content> |
- |
+ <iron-selector id="selector" multi="[[!singleInfoWindow]]" selected-attribute="open" activate-event="google-map-marker-open" on-google-map-marker-close="_deselectMarker"> |
+ <content id="markers" select="google-map-marker"></content> |
+ </iron-selector> |
+ <content id="objects" select="*"></content> |
</template> |
</dom-module> |
@@ -170,16 +172,6 @@ The `google-map` element renders a Google Map. |
}, |
/** |
- * A comma separated list (e.g. "places,geometry") of libraries to load |
- * with this map. Defaults to "". For more information see |
- * https://developers.google.com/maps/documentation/javascript/libraries. |
- */ |
- libraries: { |
- type: String, |
- value: '' |
- }, |
- |
- /** |
* A longitude to center the map on. |
*/ |
longitude: { |
@@ -351,8 +343,24 @@ The `google-map` element renders a Google Map. |
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: [ |
@@ -376,6 +384,10 @@ The `google-map` element renders a Google Map. |
this._mutationObserver.disconnect(); |
this._mutationObserver = null; |
} |
+ if (this._objectsMutationObserver) { |
+ this._objectsMutationObserver.disconnect(); |
+ this._objectsMutationObserver = null; |
+ } |
}, |
_initGMap: function() { |
@@ -394,6 +406,7 @@ The `google-map` element renders a Google Map. |
this._updateCenter(); |
this._loadKml(); |
this._updateMarkers(); |
+ this._updateObjects(); |
this._addMapListeners(); |
this.fire('google-map-ready'); |
}, |
@@ -426,14 +439,22 @@ The `google-map` element renders a Google Map. |
return mapOptions; |
}, |
- // watch for future updates |
+ _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._mutationObserver) { |
return; |
} |
- this._mutationObserver = new MutationObserver( this._updateMarkers.bind(this)); |
- this._mutationObserver.observe(this, { |
+ this._mutationObserver = new MutationObserver(this._updateMarkers.bind(this)); |
+ this._mutationObserver.observe(this.$.selector, { |
childList: true |
}); |
}, |
@@ -461,16 +482,44 @@ The `google-map` element renders a Google Map. |
this.markers = this._setMarkers(newMarkers); |
// Set the map on each marker and zoom viewport to ensure they're in view. |
- if (this.markers.length && this.map) { |
- for (var i = 0, m; m = this.markers[i]; ++i) { |
- m.map = this.map; |
- } |
- } |
+ 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. |
* |
@@ -647,7 +696,7 @@ The `google-map` element renders a Google Map. |
_fitToMarkersChanged: function() { |
// TODO(ericbidelman): respect user's zoom level. |
- if (this.map && this.fitToMarkers) { |
+ 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( |
@@ -673,7 +722,7 @@ The `google-map` element renders a Google Map. |
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)); |
@@ -694,7 +743,19 @@ The `google-map` element renders a Google Map. |
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}); |
+ } |
+ } |
}); |