How to display a custom styled Google map

Wednesday July 31, 2013 ()

Styling a Google map is available since the introduction of API version 3. Custom styles are custom colors applied to map features, like "road", "water", etc. This is done either by setting the styles property of a standard map's MapOptions with custom values or by creating a separate custom map.

Styling a standard map

Consider the following standard road map.


var mapDiv = document.getElementById("map-canvas");

var map = new google.maps.Map(mapDiv, {
     center: new google.maps.LatLng(12.504, 125.140),
     zoom: 8,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     navigationControl: true,
     scrollwheel: false,
     streetViewControl: false,
     navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
     }
 });

 // continue to create markers polygons, etc ...

<div id="map-canvas" style="width: 680px; height:400px"></div>

The above snippet creates a standard road map into a div with id of map-canvas. To style this map type which is identified by mapTypeId in line 6 above, we set the map styles option to google.maps.MapTypeStyle array whose values each corresponds to styles of a map feature we wanted styled, each being a collection of google.maps.MapTypeStyleFeatureType, google.maps.MapTypeStyleElementType, and an array of google.maps.MapTypeStyler. See example below.

var stylesArray = [
  {
    featureType: "road.highway",
    elementType: "geometry",  
    stylers: [
       {hue: "#00ccff"},
       {lightness: -26},
       {visibility: "simplified"}, /* on, off, or simplied */
       {saturation: -26}
       /*
        etc ...
       */
    ]
  }
  /*
  , 
  {   
    featureType: "water", etc ...   
  }
  */
]

map.setOptions({styles: stylesArray }); /* apply custom styles */

// map.setOptions({styles: null }); /* to remove custom, use default */


// continue to create markers, polygons, etc ...

In the preceeding snippet, styling is applied to map feature "road.highway". Other featureType values include "all" for all features, "road" for roads of any type, "poi" for points of interest, "poi.park" for parks, "landscape", "administrative" for all adminstrative regions, "adminstrative.province" for provinces.

elementType values may be "all" for all element types, "geometry", "labels" for all labels, "labels.text" for text, "lables.icon" for icons.

Please see the Google Map documentation for complete list of featureTypes, elementType and options to stylers here https://developers.google.com/maps/documentation/javascript/styling.

For a demo please visit this page https://kahimyang.com/kauswagan/Locate-Eastern-Visayas-Philippines.xhtml. Note that the large version of this demo map uses a custom map type as described in the next section.

Creating a custom map type

Styling map features of a custom map uses the same google.maps.MapTypeStyle as with a custom standard map, only the map object must be created first using a user defined custom google.maps.MapTypeId along with other standard type you want created. See line 8 up to 13 of the snippet below.

var K_MAPTYPE_ID = "KAHIMYANG_MAP";

var mapDiv = document.getElementById("map-canvas");

map = new google.maps.Map(mapDiv, {
     center: new google.maps.LatLng(12.504, 125.140),
     zoom: 8,
     mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP,  
                         google.maps.MapTypeId.HYBRID, 
                         K_MAPTYPE_ID]
     },
     mapTypeId: K_MAPTYPE_ID,
     navigationControl: true,
     streetViewControl: false,
     scrollwheel: false,
     scaleControl: true,
     navigationControlOptions: {
          style: google.maps.NavigationControlStyle.ZOOM_PAN
     }
});

var featureOptions = [
  {
      featureType: "road",
      elementType: "geometry",
      stylers: [
         {lightness: -26},
         {hue: "#00ccff"},
         {visibility: "simplified"}, /* on, off, or simplied */
         {saturation: -26}
      ]
  }
  // add more features you want styled
];


// google.maps.StyledMapTypeOptions

var styledMapOptions = {
        name: "Kahimyang Map", /* Shown on upper right of map */
        alt:  "Project custom map", /* Tool tip */
        maxZoom:  10 /* Limit max zoom */
};

var customMapType = 
   new google.maps.StyledMapType(featureOptions, styledMapOptions);

map.mapTypes.set(K_MAPTYPE_ID, customMapType);

// continue to create markers polygons, etc ...

If you have difficulty in setting the desired color and color combination use the Google's styled map wizard here http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

That's it. Good luck.


3,020

Comments (How to display a custom styled Google map)