gmaps.js console

Play with gmaps.js

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;.js"></script>
<script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
    display: block;
    width: 100%;
    height: 100%;
}

#map {
    background: #58B;
}

JavaScript

var styles = [{

      featureType : 'water',
    
      elementType : 'all',
    
      stylers : [{
        hue : '#ed1c24'
      }, {
        saturation : 73
      }, {
        lightness : -32
      }, {
        visibility : 'on'
      }]
    
    }, {
    
      featureType : 'landscape',
    
      elementType : 'all',
    
      stylers : [{
        hue : '#ed7f87'
      }, {
        saturation : 66
      }, {
        lightness : -20
      }, {
        visibility : 'simplified'
      }]
    
    }, {
    
      featureType : 'administrative',
    
      elementType : 'all',
    
      stylers : [{
        visibility : 'on'
      }]
    
    }, {
    
      featureType : 'administrative.locality',
    
      elementType : 'all',
    
      stylers : [{
        visibility : 'off'
      }]
    
    }];
    
    var options = {
    
      mapTypeControlOptions : {
    
        mapTypeIds : ['Styled']
    
      },
    
      center : new google.maps.LatLng(45.82880, -31.99219),
    
      zoom : 2,
    
      mapTypeId : 'Styled'
    
    };
    
    var div = document.getElementById('map');
    
    var map = new google.maps.Map(div, options);
    
    var styledMapType = new google.maps.StyledMapType(styles, {
      name : 'Styled'
    });
    
    map.mapTypes.set('Styled', styledMapType);