openlayers · balab2020 · Nov 16, 2017
diff --git a/examples/google-map-set-style.html b/examples/google-map-set-style.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+        <title>OpenLayers 2 Google (v3) Layer With Custom Styled Map Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="google-map-set-style.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Google (v3) Layer Example With Custom Styled Map Example</h1>
+        <div id="tags">
+            Google, api key, apikey, light
+        </div>
+        <p id="shortdesc">
+            Demonstrate use the Google Maps v3 API to apply styling on Map.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">            
+            <p>
+                Google is encouraging the use of keys for Google Maps APIs as
+                described here: <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a>.
+                Once you have included the Google Maps script in your html,
+                refer to the
+                <a href="google-map-set-style.js" target="_blank">google-map-set-style.js source</a>
+                to see how to use Google Maps as layer with custom style in OpenLayers.
+            </p>
+        </div>
+    </body>
+</html>
diff --git a/examples/google-map-set-style.js b/examples/google-map-set-style.js
@@ -0,0 +1,101 @@
+var map;
+
+function init() {
+    var googleLayer = new OpenLayers.Layer.Google(
+        "Google Physical",
+        { type: google.maps.MapTypeId.TERRAIN }
+    );
+    map = new OpenLayers.Map('map', {
+        projection: 'EPSG:3857',
+        layers: [
+            googleLayer
+        ],
+        center: new OpenLayers.LonLat(10.2, 48.9)
+            // Google.v3 uses web mercator as projection, so we have to
+            // transform our coordinates
+            .transform('EPSG:4326', 'EPSG:3857'),
+        zoom: 5
+    });
+
+    //style copied from https://developers.google.com/maps/documentation/javascript/styling for testing purpose
+    googleLayer.setStyle([
+        { elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
+        { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
+        { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
+        {
+            featureType: 'administrative.locality',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#d59563' }]
+        },
+        {
+            featureType: 'poi',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#d59563' }]
+        },
+        {
+            featureType: 'poi.park',
+            elementType: 'geometry',
+            stylers: [{ color: '#263c3f' }]
+        },
+        {
+            featureType: 'poi.park',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#6b9a76' }]
+        },
+        {
+            featureType: 'road',
+            elementType: 'geometry',
+            stylers: [{ color: '#38414e' }]
+        },
+        {
+            featureType: 'road',
+            elementType: 'geometry.stroke',
+            stylers: [{ color: '#212a37' }]
+        },
+        {
+            featureType: 'road',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#9ca5b3' }]
+        },
+        {
+            featureType: 'road.highway',
+            elementType: 'geometry',
+            stylers: [{ color: '#746855' }]
+        },
+        {
+            featureType: 'road.highway',
+            elementType: 'geometry.stroke',
+            stylers: [{ color: '#1f2835' }]
+        },
+        {
+            featureType: 'road.highway',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#f3d19c' }]
+        },
+        {
+            featureType: 'transit',
+            elementType: 'geometry',
+            stylers: [{ color: '#2f3948' }]
+        },
+        {
+            featureType: 'transit.station',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#d59563' }]
+        },
+        {
+            featureType: 'water',
+            elementType: 'geometry',
+            stylers: [{ color: '#17263c' }]
+        },
+        {
+            featureType: 'water',
+            elementType: 'labels.text.fill',
+            stylers: [{ color: '#515c6d' }]
+        },
+        {
+            featureType: 'water',
+            elementType: 'labels.text.stroke',
+            stylers: [{ color: '#17263c' }]
+        }
+    ]);
+}
diff --git a/lib/OpenLayers/Layer/Google/v3.js b/lib/OpenLayers/Layer/Google/v3.js
@@ -359,6 +359,22 @@ OpenLayers.Layer.Google.v3 = {
      */
     getMapObjectPixelFromXY: function(x, y) {
         return new google.maps.Point(x, y);
+    },
+
+    /**
+     * APIMethod: setStyle
+     * 
+     * Parameters:
+     * mapStyle: Array which has customm styles information, Refer the sample JSON from
+     * https://developers.google.com/maps/documentation/javascript/styling
+     * 
+     * Returns: Nothing
+     */
+    setStyle: function (mapStyle) {
+        this.type = 'styled';        
+        var styledMapType = new google.maps.StyledMapType(mapStyle, { name: "styled" });        
+        this.mapObject.mapTypes.set('styled', styledMapType);
+        this.mapObject.setMapTypeId('styled');
     }
 
 };