Added maxZoom and minZoom attributes to the map. Added gitignore and …

…bowerrc files. Updated demo to show maxZoom and minZoom.
GoogleWebComponents · Aug 5, 2014 · a2fb6fc · a2fb6fc
1 parent 2615b86
commit a2fb6fc
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "../"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/demo.html b/demo.html
@@ -7,22 +7,33 @@
  <script src="../platform/platform.js"></script>
  <link rel="import" href="google-map.html">
  <link rel="import" href="google-map-directions.html">
+ <style>
+ #controlsToggle {
+ position: absolute;
+ left: 50%;
+ }
+ </style>
 </head>
 <body fullbleed>
 
-<google-map latitude="37.779" longitude="-122.3892" disableDefaultUI fit>
+<google-map latitude="37.779" longitude="-122.3892" minZoom="9" maxZoom="11" fit>
  <google-map-marker latitude="37.779" longitude="-122.3892"
  title="Go Giants!" draggable="true">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/San_Francisco_Giants_Cap_Insignia.svg/200px-San_Francisco_Giants_Cap_Insignia.svg.png" />
  </google-map-marker>
 </google-map>
 <google-map-directions startAddress="San Francisco" endAddress="Mountain View"></google-map-directions>
+<button id="controlsToggle" onclick="toggleControls()">Toggle controls</button>
 
 <script>
  var gmap = document.querySelector('google-map');
  gmap.addEventListener('api-load', function(e) {
  document.querySelector('google-map-directions').map = this.map;
  });
+
+ function toggleControls() {
+ gmap.disableDefaultUI = !gmap.disableDefaultUI;
+ }
 </script>
 </body>
 </html>
diff --git a/google-map.html b/google-map.html
@@ -274,7 +274,7 @@
 - Handle removals and support .innerHTML = ''.
 - Use <google-maps-api>.api instead of google.maps namespace.
 -->
-<polymer-element name="google-map" attributes="apiKey latitude longitude zoom showCenterMarker version map mapType disableDefaultUI fitToMarkers zoomable styles">
+<polymer-element name="google-map" attributes="apiKey latitude longitude zoom showCenterMarker version map mapType disableDefaultUI fitToMarkers zoomable styles maxZoom minZoom">
 <template>
 
  <style>
@@ -403,6 +403,24 @@
  */
  styles: {},
 
+ /**
+ * A maximum zoom level which will be displayed on the map.
+ *
+ * @attribute maxZoom
+ * @type number
+ * @default null
+ */
+ maxZoom: null,
+
+ /**
+ * A minimum zoom level which will be displayed on the map.
+ *
+ * @attribute minZoom
+ * @type number
+ * @default null
+ */
+ minZoom: null,
+
  observe: {
  latitude: 'updateCenter',
  longitude: 'updateCenter'
@@ -432,7 +450,9 @@
  disableDefaultUI: this.disableDefaultUI,
  disableDoubleClickZoom: !this.zoomable,
  scrollwheel: this.zoomable,
- styles: this.styles
+ styles: this.styles,
+ maxZoom: Number(this.maxZoom),
+ minZoom: Number(this.minZoom)
  };
 
  // Only override the default if set.
@@ -506,6 +526,18 @@
  }
  },
 
+ 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);