<body>

  
<header>
  <h1>Custom Google Map </h1>
</header>

<div class="wrapper">
  <div id="newMap"></div>  
</div>
  
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  
</body>




.wrapper{
  width   : 90vw;
  height : 70vh;
  margin : 0 auto;
}
header {
  text-align : center;
}
#newMap{
  width : 100%;
  height : 100%;
}
window.onload = function () {
  
    var mapStyle = [
        // we will add the style rules here.
 {
        featureType: 'water',
        elementType: 'geometry.fill',
        stylers: [
            { color: '#2980b9' }
        ]
      },{
        featureType: 'landscape.natural',
        elementType: 'all',
        stylers: [
            { hue: '#809f80' },
            { lightness: -35 }
        ]
      },
      {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [
              { hue: '#f9e0b7' },
              { lightness: 30 }
          ]
      },{
          featureType: 'road',
          elementType: 'geometry',
          stylers: [
              { hue: '#d5c18c' },
              { lightness: 14 }
          ]
      },{
          featureType: 'road.local',
          elementType: 'all',
          stylers: [
              { hue: '#ffd7a6' },
              { saturation: 100 },
              { lightness: -12 }
          ]
      }      
         
      ];
    var options = {
    mapTypeControlOptions: {
        mapTypeIds: ['Styled']
    },
        center: new google.maps.LatLng(35.732766,51.389306),
        zoom: 4,
        disableDefaultUI: true, 
        mapTypeId: 'Styled'
    };
    var div = document.getElementById('newMap');
    var map = new google.maps.Map(div, options);
    var styledMapType = new google.maps.StyledMapType(mapStyle, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.