<h3>
Styling a standard map
</h3>


Consider the following standard road map. 



<pre class="brush:js;highlight:6">

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 ...

</pre>


<pre class="brush: xml">
&lt;div id="map-canvas" style="width: 680px; height:400px">&lt;/div>
</pre>



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.



<pre class="brush:js">
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 ...

</pre>



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 <a href="https://developers.google.com/maps/documentation/javascript/styling" class="news_link" 

title="Documentation">https://developers.google.com/maps/documentation/javascript/styling</a>.



For a demo please visit this page <a href="https://kahimyang.com/kauswagan/Locate-Eastern-Visayas-Philippines.xhtml" class="news_link" title="Demo">
https://kahimyang.com/kauswagan/Locate-Eastern-Visayas-Philippines.xhtml</a>. Note that the large version of this demo map uses a custom map type as 

described in the next section.

How to display a custom styled Google map