diff --git a/examples/google-map-set-style.html b/examples/google-map-set-style.html new file mode 100644 index 0000000000..4ac2a3cb8f --- /dev/null +++ b/examples/google-map-set-style.html @@ -0,0 +1,34 @@ + + + + + + + OpenLayers 2 Google (v3) Layer With Custom Styled Map Example + + + + + + + +

Google (v3) Layer Example With Custom Styled Map Example

+
+ Google, api key, apikey, light +
+

+ Demonstrate use the Google Maps v3 API to apply styling on Map. +

+
+
+

+ Google is encouraging the use of keys for Google Maps APIs as + described here: https://developers.google.com/maps/documentation/javascript/get-api-key. + Once you have included the Google Maps script in your html, + refer to the + google-map-set-style.js source + to see how to use Google Maps as layer with custom style in OpenLayers. +

+
+ + diff --git a/examples/google-map-set-style.js b/examples/google-map-set-style.js new file mode 100644 index 0000000000..6fde3b7dbc --- /dev/null +++ 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 index 07be02f78f..6ccdf66105 100644 --- 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'); } };