Add Custom Style on Google Maps

In this example you will learn how to add custom style on map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

//Loading google maps asynchronously
<script src="async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initialize""> </script>  

//Create google map container
<div id="map"></div>

//Add custom style
var customStyleMap = new google.maps.StyledMapType([
      {
        stylers: [
          {hue: '#890000'},
          {visibility: 'simplified'},
          {gamma: 0.5},
          {weight: 0.5}
        ]
      },
      {
        elementType: 'labels',
        stylers: [{visibility: 'off'}]
      },
      {
        featureType: 'water',
        stylers: [{color: '#890000'}]
      }
    ], {
      name: 'Custom Style'
  });
  var customMapStyle = 'custom_style';
  
 var customMapTypeId = 'custom_style';
 var lat_lng = {lat: 20.08672, lng: 78.42444};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: lat_lng,  // Brooklyn.
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
    }
  });

  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);

Add Custom Style on Google Maps Example

<!DOCTYPE html>    
<html>    
<head><!-- www.techstrikers.com -->   
<title>Add Custom Style on Map</title>  
  <style>  
 html, body {    
    height: 100%;    
    margin: 0;    
    padding: 0;    
  }    
  #map {    
    height: 99%;   
     width: 99%;  
  }  
</style>  
//loading google maps asynchronously  
<script async defer src="https://maps.googleapis.com/maps/api/js?
signed_in=true&callback=initialize"> </script>   
 <script>  
function initialize() {
  var customMapType = new google.maps.StyledMapType([
      {
        stylers: [
          {hue: '#890000'},
          {visibility: 'simplified'},
          {gamma: 0.7},
          {weight: 0.5}
        ]
      },
      {
        elementType: 'labels',
        stylers: [{visibility: 'on'}]
      },
      {
        featureType: 'water',
        stylers: [{color: '#18A9DE'}]
      }
    ], {
      name: 'Custom Style'
  });
  var customMapTypeId = 'custom_style';
 var lat_lng = {lat: 20.08672, lng: 78.42444};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: lat_lng,  // Brooklyn.
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
    }
  });

  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);
}  
</script>  
</head>  
<body>  
<div id="map"></div>  
</body>  
</html>

See Live Example

Above example will produce following output

Map API - Basics 14

Load the google maps

Set google maps properties

Create a google maps container

Create a google maps object

Load google maps asynchronously

Add custom style on google maps

Add complex styled on google maps

Localizing the google maps

ROADMAP maptypeId on google maps

SATELLITE maptypeId on google maps

HYBRID maptypeId on google maps

TERRAIN maptypeId on google maps

Set zoom on google maps

Set center on google maps

Map API - Markers 10

Add marker on google maps

Remove marker from google maps

Add multiple markers on google maps

Remove multiple markers from google maps

Add animations marker on google maps

Add draggable marker on google maps

Add marker animations with setTimeout on google maps

Add custom marker symbols on google maps

Add predefined marker symbols on google maps

Add simple marker onclick on google maps

Map API - InfoWindow 04

Display infowindow on google maps

Add infowindow on marker on google maps

Set infowindow max width on google maps

Add style in infowindow on google maps

Map API - Events 19

Add bounds changed event listener on google maps

Add center changed event listener on google maps

Add click event listener on google maps

Add dblclick event listener on google maps

Add drag event listener on google maps

Add dragend event listener on google maps

Add dragstart event listener on google maps

Add heading changed event listener on google maps

Add idle event listener on google map

Add maptypeid changed event listener on google maps

Add mousemove event listener on google maps

Add mouseout event listener on google maps

Add mouseover event listener on google maps

Add projection changed event listener on google maps

Add resize event listener on google maps

Add rightclick event listener on google maps

Add tilesloaded event listener on google maps

Add tilt changed event listener on google maps

Add zoom changed event listener on google maps

Map API - Polylines 05

Add simple polylines on google maps

Remove polyline from google maps

Add complex polylines on google maps

Add polylines onclick on google maps

Add complex polylines onclick with markers on google maps

Map API - Polygon 04

Add polygons on google maps

Add polygon array on google maps

Add polygon auto completion on google maps

Add draggable polygons on google maps

Map API - Circles 05

Add circles on google maps

Add draggable circle on google maps

Add onclick infowindow on circle in google maps

Add marker on circle on google maps

Add circle on marker click on google maps

Map API - Rectangles 03

Add rectangles on google maps

Add remove rectangle from google maps

Add rectangle zoom on google maps

Map API - Editable Shapes 04

Add user editable rectangle on google maps

Add draggable user editable rectangle on google maps

Add user editable circle on google maps

Add draggable user editable circle on google maps

Map API - Ground Overlays 02

Add ground overlays on google maps

Remove overlays from google maps

Map API - Symbols 03

Add animated symbols on google maps

Add arrows symbols on google maps

Add dashed lines symbols on google maps

Map API - Geocoding Service 04

Add geocoding service on google maps

Add reverse geocoding service on google map

Add reverse geocoding service by place ID on google maps

Add geocoding component restriction on google maps

Map API - Directions Service 04

Add directions service on google maps

Display text directions with setPanel() on google maps

Add travel modes in directions on google maps

Add draggable directions on google maps

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Recent Articles

Getting Started With ASP.NET Core MVC Application

Setup and Installation ASP.NET Core 1.0

Understanding ASP.NET Core 1.0

Customize User Profile Info in MVC With ASP.NET Identity

How to extend the properties of Identity with additional custom properties in ASP.NET

ASP.NET Identity Authentication - User Login and Registration Form

Understanding ASP.NET Identity

Implement custom user registration and login page with the help of Entity Framework using AES encryption in ASP.NET MVC application

Export Report as CSV or XLSX or XLS from ReportViewer in ASP.NET

JQGrid Server-Side processing using HttpHandler in ASP.NET