PrintThe 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.
Example 1: Changing Colors
This first example produces a new map type (called "Styled Map") 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 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 constants: to 'water' for the first MapTypeStyle object and 'administrative.province' for the second.
The elementType property is set using one of the MapTypeStyleElementType constants: to 'geometry.fill' for the first object and 'labels.text.fill' for the second.
Finally, the stylers' property is set using a MapTypeStyler 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.
Example 2: Changing Feature Visibility
This second styled map example 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});
Using the Styled Maps Wizard
To help API developers style their base maps, Google has put together a Styled Maps Wizard. Let's walk through how you might use this wizard to reproduce the styling code we saw in Example 1 above.
- In the Selectors dialog, select Water under the Feature Type heading.
You should see the interface automatically scroll to the right to reveal an empty option list. This adjacent option list is empty because Google offers no sub-categories for the Water feature type. If you select any of the other main categories (such as Administrative), you'll see sub-categories. - Under the Element Type heading, select Geometry.
You should see the options Fill and Stroke appear to the right. (If you only see Stroke, be sure to scroll up though that list.) When dealing with polygon features as in this case, fill refers to the interior of the polygon, while stroke refers to its outline. Note: Experimenting with the wizard, it appears that no differentiation is made between the fill and stroke for many polygonal feature types (like Water). So don't be surprised if you are unable to assign separate colors for each of these. - Select Fill from the Geometry sub-options.
- Check the Color checkbox.
You should see the water features on your map change to gray since the RGB sliders initialize to the midpoint value of 128. Note that you can change the color by dragging the sliders, entering values between 0-256 or by entering a hexadecimal code.
With a color selected, note that the Map Style dialog on the right side of the window summarizes the selections you've made in the Selectors dialog. These selections are labeled under the heading Style 0. - Add a new style by clicking the Add button at the top of the Map Style dialog.
You should see a new entry in the Map Style dialog labeled Style 1 and that the options in the Selectors dialog have been reset. - Return to the Selectors dialog and make the following selections:
Feature type: Administrative > Province
Element type: Labels > Text > Fill
Color: Red = 255, Green = 128, Blue = 128
You should end up with red state labels like the ones in my Example 1, and again, a summary of your style settings in the Map Style dialog. - At the bottom of the Map Style dialog, click the Show JSON button to see the style settings in JavaScript Object Notation (JSON). If you were incorporating these settings into your own map, you could copy and paste this code from the JSON popup window into your web page.
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.