adding support for custom map styles

GoogleWebComponents · Jun 28, 2014 · c0078fc · c0078fc
1 parent f6b213f
commit c0078fc
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/google-map.html b/google-map.html
@@ -264,7 +264,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">
+<polymer-element name="google-map" attributes="apiKey latitude longitude zoom showCenterMarker version map mapType disableDefaultUI fitToMarkers zoomable styles">
 <template>
 
   <style>
@@ -383,6 +383,15 @@
      */
     zoomable: true,
 
+    /**
+     * If set, custom styles can be applied to the map.
+     *
+     * @attribute styles
+     * @type JSON encoded array
+     * @default null
+     */
+    styles: null,
+
     observe: {
       latitude: 'updateCenter',
       longitude: 'updateCenter'
@@ -405,6 +414,15 @@
         scrollwheel: this.zoomable
       };
 
+      if (this.styles !== null) {
+        try {
+          mapOptions.styles = JSON.parse(this.styles);
+        }
+        catch(e) {
+          mapOptions.styles = this.styles;
+        }
+      }
+
       // 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) {