Customizing Google Maps
In this article we will learn how to configure map options including styles and UI elements
Our Google Maps web parts are a great way to display information that is easily manageable in the Pages module and they offer a lot of options. However, they don’t contain all of Google’s MapOptions and the javascript request to Google’s API is compiled so we cannot alter it to contain our custom properties.
There is one location where we have access to the google.map object: the addGoogleMarker() function in ~\CMSWebParts\Maps\Documents\GoogleMaps_files\GoogleMaps.js. This function is called whenever a marker is placed on a Google Map web part, so it important to note that this approach only works for maps containing at least one marker. With this reference to the google.map object, we can now utilize the Google Maps API to apply options and events.
Setting Options
You can see a list of available MapOptions and events in Google’s documentation: https://developers.google.com/maps/documentation/javascript/reference#MapOptions. Let’s use scrollwheel as an example. A common request is to disable the use of the mouse wheel to zoom in and out of a map; this option is not available within the web part properties. However, we can use map.setOptions() to set this property:
function addGoogleMarker(map, latitude, longitude, title, content, zoom, iconURL) {
map.setOptions({ scrollwheel: false });
Applying Styles
Google’s Maps API also grants you a variety of styling options to make your map appear exactly how you’d like. There are many sites that offer pre-defined style templates such as https://snazzymaps.com, and you can also create your own at http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html.
Below, we are applying a style from snazzymaps.com to our Google Map:
function addGoogleMarker(map, latitude, longitude, title, content, zoom, iconURL) {
var styles = [{ "elementType": "geometry", "stylers": [{ "hue": "#ff4400" }, { "saturation": -68 }, { "lightness": -4 }, { "gamma": 0.72 }] }, { "featureType": "road", "elementType": "labels.icon" }, { "featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{ "hue": "#0077ff" }, { "gamma": 3.1 }] }, { "featureType": "water", "stylers": [{ "hue": "#00ccff" }, { "gamma": 0.44 }, { "saturation": -33 }] }, { "featureType": "poi.park", "stylers": [{ "hue": "#44ff00" }, { "saturation": -23 }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "hue": "#007fff" }, { "gamma": 0.77 }, { "saturation": 65 }, { "lightness": 99 }] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [{ "gamma": 0.11 }, { "weight": 5.6 }, { "saturation": 99 }, { "hue": "#0091ff" }, { "lightness": -86 }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "lightness": -48 }, { "hue": "#ff5e00" }, { "gamma": 1.2 }, { "saturation": -23 }] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [{ "saturation": -64 }, { "hue": "#ff9100" }, { "lightness": 16 }, { "gamma": 0.47 }, { "weight": 2.7 }] }];
map.setOptions({ styles: styles });
Note: Javascript is aggressively cached by all browsers, so make sure to clear your browser's cache after modifying this file!