The Maps API provides a great deal of control over the appearance of the base map. The process of modifying part of the base map involves specifying a feature type (e.g., road, transit, water), an element type (e.g., geometry, labels) and the desired style for that feature/element. To illustrate these concepts further, let's have a look at the source code of a couple of examples. Note that these examples initialize the page slightly differently than the Hello World example discussed in the previous lesson. I recommend you consider Google's current Hello World initialization method a best practice, but you should also not be "thrown off" by the method used in the examples below. You're likely to see many slight variations like this if you look at other people's source code, such as in places like stackoverflow.
This first example produces a new map type (called "Styled Map") [1] in which the color of water and of state names has been altered. Let's look first at the creation of the styles variable. This variable is assigned an array of MapTypeStyle [2]objects -- in this case, two such objects. Note that each of these objects has three properties set: featureType, elementType, and stylers.
The featureType property is set using one of the MapTypeStyleFeatureType [3] constants: to 'water' for the first MapTypeStyle object and 'administrative.province' for the second.
The elementType property is set using one of the MapTypeStyleElementType [4] constants: to 'geometry.fill' for the first object and 'labels.text.fill' for the second.
Finally, the stylers' property is set using a MapTypeStyler [5]object. In both cases, this object has only its color property set, though other commonly set MapTypeStyler properties include visibility and weight.
With an array of MapTypeStyle objects created, the next step is to create a StyledMapType object. To create this object, the MapTypeStyle array is passed to its class constructor along with a StyledMapTypeOptions object literal composed of two property settings: map and name. The map property defines the Map object that the StyledMapType will be associated with, while the name property defines the label that will appear on the map type control.
The next step is to add the StyledMapType to the Map's MapTypeRegistry. That is done with the line:
map.mapTypes.set('styled', styledMapType);
styledMapType refers to the object created in the previous statement, while the string 'styled' is the name assigned to the map type in the registry. This name is entirely up to you, and you'll note that it's different in Google's example.
The next statement sets the map's opening map type to the 'styled' map type. In some contexts, you might omit this statement so that your styled map type is an option for the user to switch to, but is not the default.
A final important step is to add the StyledMapType to the map type control array. This is actually done near the beginning of the initialize() function when the mapTypeControlOptions property is set using the expression:
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'styled']
It may seem strange that this setting comes before the StyledMapType is actually created, but apparently it's OK to do this.
This second styled map example [6] demonstrates how you might go about simplifying what's shown on the base map by turning off a number of its features. As with the first example, the key to manipulating the components of the base map is to specify a feature type, element type and desired style.
The first featureType altered in this example is 'road'. Keep in mind that it is possible to manipulate different categories of roads (e.g., roads.highway, roads.arterial). The use of 'road' here indicates that the style setting should be applied to all types of roads.
The setting of the elementType to 'all' specifies that the style should be applied to both the geometry of the roads and their labels.
Unlike the previous example where we changed the colors of features, here we set the visibility of the road features to 'off'.
Continuing on through the script, note that a number of other base map features are turned off in a similar way (national boundaries, neighborhood boundaries, land parcel boundaries, points of interest, and transit features). Also note that locality features (showing urbanized areas) have not been turned off, but have been lightened by setting their lightness property to 40%.
This base map is similar to the light options that we saw in Google My Maps and ArcGIS Online in Lesson 1 and is especially appropriate in situations where you want to ensure that the user's attention is drawn to the map's overlays rather than features on the base map.
One final difference to note between this example and the previous one is in the application of the styles. In the previous example, a new map type was created and made available as an option for the user to switch to. In this case, the styles are applied across all the map types that are made available to the user -- in this case, ROADMAP and TERRAIN -- through the line:
map.setOptions({styles: visStyles});
To help API developers style their base maps, Google has put together a Styled Maps Wizard [7]. Let's walk through how you might use this wizard to reproduce the styling code we saw in Example 1 above.
Now that you've seen how you can style the Google basemap to your liking, let's move to the next page where you'll see how to display a callout window when a marker is clicked.
Links
[1] http://www.personal.psu.edu/jed124/styled_map1.html
[2] https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyle
[3] https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
[4] https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleElementType
[5] https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyler
[6] http://www.personal.psu.edu/jed124/styled_map2.html
[7] http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html